SASS 用变量自定义类名

Question

有没有办法自定义SASS中的变量？例如：

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

如果我给一个元素 class="mb-50"，它应该是 margin-bottom 50。我只想知道 SASS 是否可以。

Answer 1

是的，可以借助variable interpolation or variable substitutionwhich#{}用于 SASS 中的变量替换，mixins这就像函数一样是一个代码块。

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

插值的简单示例，并将值设置为 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()将被执行，它将调用margin-class()每个$margins和$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);
    }
  }
}

Answer 2

对于面临此问题的其他人，以下是实现这一目标的方法：-

@for $i from 1 through 10 {
  .mb-#{$i} {
     margin-bottom: #{$i}rem;
  }
}