If statement 使用；每个循环变量“；SASS中的内部if语句

我试图通过SASS中的each循环生成一系列样式。仅当设置了每个循环当前查看的变量时，才应生成样式

我尝试了不同的变量“样式”，例如：$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 color->black

---

但两者都会抛出“预期标识符”或“未知变量”，具体取决于我的尝试方式。

您不能使用插值引用变量–在您的例子中是

${$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; }

---

非常感谢你！我现在就去试试。我知道“null”会导致属性不被打印，但这是我尝试的简化（有“使用”和“强制”，并且它不适用于一个属性，而是适用于许多具有标准值的属性）@ValentinHuwer如果他的回答对你有帮助，确保并选中他答案旁边的复选标记，这样他就可以获得分数。你也会的