Question

需要通过构建的名称调用var。这就是我所拥有的

$font-size-small:3rem;
$line-height-base:2rem;

$font-size-h1:1rem;
$font-size-h2:2rem;
$font-size-h3:3rem;
$font-size-h4:4rem;
$font-size-h5:5rem;
$font-size-h6:6rem;



@for $i from 1 through 6 {
    $tag: h#{$i};
    $var: font-size-h#{$i};
    $sized: (100% * $font-size-small / #{$var});

    #{$tag}.small, .#{$tag}.small, #{$tag} small {
        font-size: $sized;
    }
}

输出如

h1.small, .h1.small, h1 small {
  font-size: 300% / font-size-h1;
}

h2.small, .h2.small, h2 small {
  font-size: 300% / font-size-h2;
}

h3.small, .h3.small, h3 small {
  font-size: 300% / font-size-h3;
}

h4.small, .h4.small, h4 small {
  font-size: 300% / font-size-h4;
}

h5.small, .h5.small, h5 small {
  font-size: 300% / font-size-h5;
}

h6.small, .h6.small, h6 small {
  font-size: 300% / font-size-h6;
}

但我需要的是

h1.small, .h1.small, h1 small {
  font-size: 300% / 1rem;
}

h2.small, .h2.small, h2 small {
  font-size: 300% / 2rem;
}

h3.small, .h3.small, h3 small {
  font-size: 300% / 3rem;
}

h4.small, .h4.small, h4 small {
  font-size: 300% / 4rem;
}

h5.small, .h5.small, h5 small {
  font-size: 300% / 5rem;
}

h6.small, .h6.small, h6 small {
  font-size: 300% / 6rem;
}

我找不到任何不使用地图的东西。问题是这些整个样式中有很多引用为____-6，其中6就像1到6.所以为什么不只是构建var名称并调用它。

Answer 1

您不能在变量名中使用插值，另一种解决方案是使用贴图和函数来提取每个值的数量以进行数学运算：

<强> SASS

$font-size-small: 3rem;
$line-height-base: 2rem;

$map:(
font-size-h1: 1rem,
font-size-h2: 2rem,
font-size-h3: 3rem,
font-size-h4: 4rem,
font-size-h5: 5rem,
font-size-h6: 6rem
);

@function strip-unit($number) {
    @return $number / ($number * 0 + 1);
}

@for $i from 1 through 6 {
    $tag: h#{$i};
    $var: map-get($map, font-size-h#{$i});
    $sized: (100% * strip-unit($font-size-small) / #{$var}  );

    #{$tag}.small, .#{$tag}.small, #{$tag} small {
        font-size: $sized;
    }
}

<强>输出

h1.small, .h1.small, h1 small {
  font-size: 300% / 1rem;
}

h2.small, .h2.small, h2 small {
  font-size: 300% / 2rem;
}

h3.small, .h3.small, h3 small {
  font-size: 300% / 3rem;
}

h4.small, .h4.small, h4 small {
  font-size: 300% / 4rem;
}

h5.small, .h5.small, h5 small {
  font-size: 300% / 5rem;
}

h6.small, .h6.small, h6 small {
  font-size: 300% / 6rem;
}

P.S。：我坚持认为font-size的语法在CSS中不正确。

Sass使用字符串来调用var

1 个答案: