Question

我的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以使用用户设置的前缀，或者如果没有设置为不包含前缀。

这是可能的吗？

Answer 1

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

  $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');
}

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

1 个答案: