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

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 方法获取值，而不是使用插值生成变量名称:)