Sass 用于在元素名称之前显示类或id的SCSS mixin

My mixin有4个变量：每行项目数、边距、子元素名称、前缀类型

比如说

// 4 per row, 25 gutter, element name, and it's a class
@include list-grid(4, 25, list__item, class);

混合：

 @mixin list-grid($per-row, $spacing, $child, $prefix){
    margin: 0 em(-$spacing/2);
    @include clearfix;
    //negate the display-inline biatch
    letter-spacing: -0.31em;

        >   @if $prefix == "class" { 
                .#{$child}
            }
            @elseif $prefix == "id" { 
                ##{$child}
            }
            @else $prefix == null { 
                #{$child}
            }


            width: 100%/$per-row;
            font-size: 16px;
            position: relative;
            padding: 0 em($spacing/2) em($spacing) em($spacing/2);
            display: inline-block;
            vertical-align: top;
            letter-spacing: 0;
            background-clip: content-box;
        }
}

我想我可以使用一些if语句来更改输出CSS，以使用用户设置的前缀，或者如果没有任何内容设置为不包含前缀

---

这是可能的吗？

要回答您的问题，您需要将选择器放入一个变量中：

  $selector: $child;

  @if $prefix == "class" { 
      $selector: '.#{$child}';
  }
  @elseif $prefix == "id" { 
      $selector: '##{$child}';
  }

  > #{$selector} {
    color: red;
  }

然而，你太过工程化了。只需传入您要使用的选择器

list-grid($per-row, $spacing, $selector) {
    > #{$selector} {
        color: red;
    }
}

.foo {
    @include list-grid(1, 1, '#foo');
}

.bar {
    @include list-grid(1, 1, '.bar');
}

ul {
    @include list-grid(1, 1, 'li');
}

---

谢谢-我确实认为这有点过度设计，但我很欣赏这两个部分！