Question

我试图在SASS中动态调用现有变量的@for循环。

$font-size-h1:            floor(($font-size-base * 2.6));
$font-size-h2:            floor(($font-size-base * 2.15));
$font-size-h3:            ceil(($font-size-base * 1.7));
$font-size-h4:            ceil(($font-size-base * 1.25));
$font-size-h5:            $font-size-base;
$font-size-h6:            ceil(($font-size-base * 0.85));

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

Answer 1

是的，你可以：使用 placheholders 代替变量。它比你想象的要冗长一点，但它的工作原理是使用@extend：

%font-size-h1 { font-size: floor(($font-size-base * 2.6)); };
%font-size-h2 { font-size: floor(($font-size-base * 2.15)); };
%font-size-h3 { font-size: ceil(($font-size-base * 1.7)); };
%font-size-h4 { font-size: ceil(($font-size-base * 1.25)); };
%font-size-h5 { font-size: $font-size-base; };
%font-size-h6 { font-size: ceil(($font-size-base * 0.85)); };

@for $i from 1 through 6 {
  h#{$i} {
    // Use extend to insert placeholder styles
    @extend %font-size-h#{$i};
  }
}

Answer 2

虽然@chriskirknielsen的回答正确，但他并没有提供如何将其应用于实际情况的示例，所以就这样：

$font-size-base: 16px;

$font-sizes: (
  h1: floor(($font-size-base * 2.6)),
  h2: floor(($font-size-base * 2.15)),
  h3: ceil(($font-size-base * 1.7)),
  h4: ceil(($font-size-base * 1.25)),
  h5: $font-size-base,
  h6: ceil(($font-size-base * 0.85))
);

@each $key, $value in $font-sizes {
  #{$key} { font-size: $value !important; }
}

Answer 3

您无法插值以使用SASS调用变量。你最好的选择是使用像数组一样工作的地图。这是一个很好的参考：https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184

@for循环内的SASS动态变量

3 个答案: