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

【问题标题】：Using "each loop variables" inside if statement in SASS在 SASS 中的 if 语句中使用“每个循环变量”
【发布时间】：2019-05-24 20:09:53
【问题描述】：

我正在尝试通过 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-color -> 黑色

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

【问题讨论】：

标签： if-statement sass each

【解决方案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; }

【讨论】：

非常感谢！马上试试。我知道“null”会导致属性不被打印，但这是我尝试的简化（有一个“使用”和一个“力”，它也不适用于一个属性，而是适用于许多属性有标准值）
@ValentinHuwer 如果他的回答对您有所帮助，请务必选中他的回答旁边的复选标记，以便他获得荣誉。你也会