时间戳

首页 > 解决方案 > 在 SASS 中的 if 语句中使用“每个循环变量”

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

问题描述

我正在尝试通过 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;
    }
  }
}

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

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

标签： if-statementsasseach

解决方案

您不能使用插值引用变量 - 在您的情况下$#{$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; }

推荐阅读