带有 SASS 的条件选择器名称

Question

我想生成像grid-col-1, grid-col-md-1, grid-col-lg-1, grid-col-2, grid-col-md-2, grid-col-lg-2...

所以，我创建了这个 mixin 来做到这一点：

$grid-columns: 12;
@mixin grid-col-builder($type: false) {
  @for $i from 1 through $grid-columns {
    $selector: 'grid-col-';
    @if $type { $selector: $selector + $type + '-' + $i; }
    @else { $selector: $selector + $i; }
    .#{$selector} { width: $i/$grid-columns*100%; }
  }
}

但是我还是觉得代码有点重复。有没有更聪明的方法来制作在选择器名称中添加类型的条件？

Answer 1

您可以使用以下if()功能使事情更紧凑：

$grid-columns: 12;
@mixin grid-col-builder($type: false) {
  @for $i from 1 through $grid-columns {
    .#{'grid-col-' + if($type, $type + '-', '') + $i} {
        width: $i / $grid-columns * 100%;
    }
  }
}