SASS动态变量名和嵌套循环引发错误

我不完全确定我所尝试的是否可行，但我已经尽可能多地搜索了，并构建了以下嵌套循环来创建许多十六进制颜色的变体（而不是手动键入变量名）

但是，我在第二个循环中遇到以下错误：

$ gulp sass
[17:01:14] Using gulpfile ~/Sites/webcomponents/gulpfile.js
[17:01:14] Starting 'sass'...

events.js:163
      throw er; // Unhandled 'error' event
      ^
Error: src/scss/app.scss
Error: Invalid CSS after "...n $variations {": expected 1 selector or at-rule, was "#{$name}-#{$v}: lig"
        on line 72 of src/scss/app.scss
>>     @each $v in $variations {
   -----------------------------^

    at options.error (/Users/martynbisset/Sites/webcomponents/node_modules/node-sass/lib/index.js:291:26)

这不是嵌套循环的正确语法吗？另外，当我尝试在没有循环的情况下动态地执行变量名时，我也会得到一个错误。。抱歉，有点像一个两个问题，但如果您能给我一些建议，我将不胜感激，因为我对SASS/SCSS很在行

$name: "Hello";
$v: "70%";

#{$name}-#{$v}: lighten($hex, $v); // throws error too :(

---

不能在SCS中创建动态变量。您可以做的是将变量名转换为类名，并在任何地方使用它。@each中也有语法问题。它是key，value，所以每个都是$name，$hex

$colors: (
    green: #006938,
    pink: #9d1e65,
    //...
);

$variations: (
    30, 50, 70,
);

@each $name, $hex in $colors {
    @each $v in $variations {
      $perc: percentage($v/100);
      .#{$name}-#{$v} {
        background-color: lighten($hex, $perc);  
      } 
    }
}

---

您不能在SASS中声明新的css属性或动态变量名，但通过将变量名转换为不同的css类，您肯定可以做得更好，我们将逐步学习这些内容，并在您的SASS中进行更正

Map：Map是SASS中的一种数据类型，表示一个或多个键值对。映射键和值可以是任何SASS数据类型（如数字、字符串、颜色、布尔值、映射、值列表、null）

map的语法

因此，请更正
$variations
的定义。即使不指定
键
也可以，但这既不是正确的语法，也不是模块化编程

SASS还提供了

map-get（）

例如

 $font: (    /*define 'font' map*/
  color: #666,
  size: 16px
);

body {
  color: map-get($font, color);      /*get value of 'color' property of 'font'*/
  font-size: map-get($font, size);
}

2.因为我们不能在SASS中动态声明变量名，所以最好使用
map
和
@每个
循环创建一些css类

使用下面的SASS代码：

$color:(    
    green: #006938,
    pink: #9d1e65
);
$variations: (
   thirty: 30%,
   fifty: 50%
);

@each $name, $hex in $color {
    @each $n, $v in $variations {
        .color-#{$name}-#{$n}{
            color: lighten($hex, $v);
        }
    }
}

编译后，它将生成以下css

.color-green-thirty {
  color: #03ff89;
}

.color-green-fifty {
  color: #69ffb9;
}

.color-pink-thirty {
  color: #e470b1;
}

.color-pink-fifty {
  color: #f4c6e0;
}

无法在sass中创建动态变量
$color:(    
    green: #006938,
    pink: #9d1e65
);
$variations: (
   thirty: 30%,
   fifty: 50%
);

@each $name, $hex in $color {
    @each $n, $v in $variations {
        .color-#{$name}-#{$n}{
            color: lighten($hex, $v);
        }
    }
}

.color-green-thirty {
  color: #03ff89;
}

.color-green-fifty {
  color: #69ffb9;
}

.color-pink-thirty {
  color: #e470b1;
}

.color-pink-fifty {
  color: #f4c6e0;
}