我可以使用 SASS/SCSS 变量来设置类名吗？

Question

我正在尝试为网格布局创建一堆列，并想知道是否可以使用 SASS/SCSS mixin 自动进行宽度计算。

我目前正在写作

@mixin setWidth($a, $b){
 width : ($a / $b)*100%;
}
.col-1-2{
 @include setWidth(1, 2);
}

这很好，但我只是想知道是否有办法使它更加 DRY，通过使用变量名设置类并使用 mixin 创建类。

就像是

@mixin setClass($a, $b){
  .col-$a-$b{
    width : ($a / $b)*100%;
  }
}

@include setClass(1, 2);

Answer 1

您只需要在将变量#{$a}用于命名约定时对其进行插值

@mixin setClass($a, $b){
  .col-#{$a}-#{$b} {
    width : ($a / $b)*100%;
  }
}

@include setClass(1, 2);