css - @for 循环内的 SASS 动态变量

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

是的，您可以:使用占位符 而不是变量。它比您想象的要冗长一点，但它可以通过使用 @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};
  }
}