Sass 列出分隔符并写一个干净的@mixin

Question

我有一个 @mixin 允许我命名-space 选择器。代码如下：

@mixin pre-assign($value) {
  $pre: $value !global;
}

@include pre-assign('foo');

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(
        str-slice($string, $index + str-length($search)),
        $search,
        $replace
      );
  }

  @return $string;
}

@mixin pre($value) {
  $result: '';

  $result: str-replace($value, '.', '.#{$pre}-');

  #{$result} {
    @content;
  }
}

我可以使用 @mixin 如下：

// declaration
@include pre('.bar + .baz') {
  display: none;
}

// output
.foo-bar + .foo-baz {
  display: none;
}

我想整理一下将选择器传递给 @mixin 并省略引号的方式，这样我就不会将选择器作为字符串值传递：

@include pre(.bar + .baz) {
  display: none;
}

但是，当我尝试这样做时，遇到了以下错误：

ERROR in ./lib/all.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./lib/all.scss)

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@include pre(.bar + .baz) { ^

Invalid CSS after "@include pre(": expected expression (e.g. 1px, bold), was ".p--compact) {"

我怀疑这与 $list_separator 有关，但不确定如何实现。有谁知道如何做到这一点？

Answer 1

是的，运算符必须是字符串。但是您可以传递没有字符串的选择器。 DEMO

代码

$pre: ;

@mixin namespace($args...) {
  $selector: '';

  @each $val in $args {
    $index: index($args, $val);
    $selector: $selector + if($index % 2 == 1, '.#{$pre}-#{$val}', ' #{$val} ');
  }

  #{$selector} {
    @content
  }
}

用法

@include namespace(cool, '+', stuff) {
  color: green;
}

@include namespace(stuff, '~', things) {
  color: red;
}

@include namespace(stuff, '*:not(.lame)', things) {
  color: red;
}

Answer 2

如果你真的觉得不需要使用字符串，你可以把你的运算符放在一个映射中； DEMO

代码

$operators: (
  adjacent: '+',
  general: '~',
  universal: '*',
  child: '>',
  descendent: ' '
);

@mixin namespace($list...) {
  $selector: '';

  @each $arg in $list {
    $index: index($list, $arg);
    $val: if($index % 2 == 1, '.#{$pre}-#{$arg}', map-get($operators, $arg));
    $selector: $selector + $val;
  }

  #{$selector} {
    @content
  }
}

用法

@include namespace(cool, adjacent, stuff) {
  color: green;
}

@include namespace(cool, general, stuff) {
  color: green;
}

Sass 列出分隔符并写一个干净的@mixin

Sass list separators and writing a clean @mixin

css

namespaces

sass

scss-mixins

代码

用法

代码

用法