css - SASS 使用变量自定义类名

Question

有什么方法可以自定义 SASS 中的变量吗？ 例如:

.m-b-{$number} {
    margin-bottom: $number;
}

如果我将 class="m-b-50"赋予一个元素，它应该采用 margin-bottom 50。我只是想知道 SASS 是否可行。

Answer 1

是的，在 变量插值或变量替换 的帮助下，它可以在 SASS 中使用 #{} 进行变量替换，而 mixins是一个代码块，就像函数一样。

Interpolation 是对包含一个或多个变量的表达式或字符串求值的过程，产生的结果中变量被替换为其相应的值.

在 SASS 中对 css 属性进行插值和设置值的简单示例:

$number:60;
$n: 20px;

.m-b-#{$number}{
  margin-bottom: #{$number}px;
  margin-top: $n;
}

要创建自定义类名，将使用 mixins:

@mixin margin-class($side, $number) {
  $firstLetter: str-slice($side, 0, 1);
  .m-#{$firstLetter}-#{$number}{
     margin-#{$side}: #{$number}px;
  }
}

$margins: (10, 20);
$sides: ("top", "right", "bottom", "left");
@mixin generate-margin(){
   @each $margin in $margins{
      @each $side in $sides{
        @include margin-class($side, $margin);
      }
   }
}

@include generate-margin();

在这里，generate-margin() 将被执行，它将为每个 $margins 和 调用 margin-class() $sides，并将生成以下 CSS 类:

.m-t-10 {
  margin-top: 10px;
}

.m-r-10 {
  margin-right: 10px;
}

.m-b-10 {
  margin-bottom: 10px;
}

.m-l-10 {
  margin-left: 10px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-b-20 {
  margin-bottom: 20px;
}

.m-l-20 {
  margin-left: 20px;
}

当您只需要特定值时，这是一种方法，但如果您想为 0-20 创建边距类，您可以循环遍历 0 到 20，如下所示:

@mixin generate-margin(){
  @for $margin from 1 through 20{
    @each $side in $sides{
      @include margin-class($side, $margin);
    }
  }
}