Question

我试图用每个标题级别的变量循环出一系列标题字体大小，并且我陷入将变量名称声明为占位符的困境。

_variables.scss

$h1-font-size: 2.5rem;
$h2-font-size: 2.25rem;
$h3-font-size: 2rem;

_heading-loops.scss

@for $i from 1 through 3 {
   h#{$i} {
      font-size: $#{i}-font-size;
   }
}

期望CSS输出

h1 { font-size: 2.5rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 2rem; }

我原以为这样会解决，但不幸的是，它引发了以下错误：

error scss/utilities/functions/_headings.scss (Line 37: Invalid CSS 
after "      font-size: ": expected expression (e.g. 1 px, bold), was 
"$#{i}-font-size;")

我想就此提出一些建议，因为我已经花了太长时间摸不着头脑了，在此先感谢。

Answer 1

通过使用您自己的代码的小解决方法，我能够获得预期的输出。

$h1: 2.5rem;
$h2: 2.25rem;
$h3: 2rem;

$htags: $h1, $h2, $h3;

@for $i from 1 through length($htags) {
  h#{$i} {
    font-size: nth($htags, $i);
  }
}

我在https://www.sassmeister.com/中尝试过，效果很好

注意：您可以创建一个列表并使用nth方法来获取值，而不是使用插值来生成变量名称：）

将Sass占位符与变量一起使用

1 个答案: