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}-颜色-> $ 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; }

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

1 个答案: