在SASS中使用if语句中的“每个循环变量”

Question

我试图通过SASS中的每个循环生成一系列样式。只应该生成样式，如果现在设置了每个循环正在查看的变量。

我尝试了不同的变量“样式”，例如：$use-#{$type}，但是我有点迷失了。甚至试图用一个函数来实现它，但似乎函数不能访问循环的变量。

$typo: (t1, t2);

$use-t1: 1; $t1-color: black;
$use-t2: 1; $t2-color: black;

@each $type in $typo{
  @if $#{use-$type} == 1{ 
    .#{$type}{
      color: $#{$type}-color;
    }
  }
}

我希望每个循环第一轮中的变量是：

• $#{use-$type} -> $use-t1 -> 1
• $#{$type}-color -> $t1-彩色->黑

但两者都抛出“预期标识符”。或者“未知变量”，这取决于我如何尝试它。

Answer 1

您不能使用插值引用变量--在您的例子中是$#{$type}-color。我建议你用一张地图来代替，比如：

  $map: (
    t1: (use: 1, color: black),
    t2: (use: 2, color: white)    
  );


  @each $key, $value in $map {
    @if map-get($value, use) == 1 {
      .#{$key} { color: map-get($value, color); }    
    }
  }

  // output 
  .t1 { color: black; }

另外，值得注意的是，Sass不会打印带空值的属性或没有属性的类--为什么不检查use就可以这样做

  $map: (
    t1: (color: black),
    t2: (color: null)    // no color => no prop => empty class => nothing printed  
  );
  @each $key, $value in $map {
    .#{$key} { color: map-get($value, color); }    
  }


  // output 
  .t1 { color: black; }