将循环内的 sass 变量作为没有值的选择器传递答案

【问题标题】：Pass sass variable inside loop as a selector without value将循环内的 sass 变量作为没有值的选择器传递
【发布时间】：2017-06-14 21:30:38
【问题描述】：

除了已经建立的选择器之外，我想使用 mixin 让我可以根据需要将其他选择器作为参数传递。但我在这里遇到了一个错误。不知道我错过了什么，除非你不能在循环中使用变量而不将值传递给每个项目，而我将这一切都错了。

@mixin light-section-text( $selectors: null ) {

  @if ( $selectors ) {
    @for $i from 1 through length( $selectors ) {
      #{nth( $selectors, $i )},
    }
  }
  p,
  address,
  li {
    color: $white;
  }
}

在这种情况下，@include light-section-text( "body", "strong", "strong a" ); 的期望输出将是：

body,
strong,
strong a,
p,
address,
li {
  color: #fff; }

【问题讨论】：

标签： sass gulp-sass

【解决方案1】：

首先，您不能直接将选择器列表传递给 mixin 函数，因为它会导致 $selectors 成为第一个字符串。所以你必须先声明一个列表变量，然后将该变量传递给函数。

其次，您应该简单地使用 Sass 提供的 Placeholders 功能，它利用了 @extend 和 % 字符。

%color{
  color: white;
}
@mixin light-section-text( $selectors: null ) {

  @if ( $selectors ) {
      @for $i from 1 through length( $selectors ) {
        #{nth( $selectors, $i )}{
          @extend %color;
        }
      }
  }
  p,
  address,
  li {
     @extend %color;
  }
}
$list-variable: "body", "strong", "strong a";

@include light-section-text($list-variable);

替代方法

你甚至不需要使用 mixin 函数，因为这个任务可以由 sass 占位符单独处理。

$white : white;

%color{
  color: $white;
}
$list-variable: "body", "strong", "strong a", "p", "address", "li";

@each $item in $list-variable {
    #{$item} {
      @extend %color;
    }
}

【讨论】：