SASS 动态变量名和嵌套循环抛出错误

Question

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

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

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

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

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

$ 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 :(

Answer 1

您不能在 SASS 中声明新的 css 属性或动态变量名，但您绝对可以通过将变量名转换为不同的 css 类来做更好的事情，我们将逐步学习并在您的 SASS 中进行更正。

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

   的语法 map

    map-name1{
       key1: value1,
       key2: value2,
       ...
    }
   
    map-name2{  
      key1:(key11:value11, key12: value12), //value is of map datatype
      key2:(key21:value21, key22: value22)
    }
   

   因此，更正 的定义$variations。即使您不指定key它也会起作用。

SASS 还提供map-get()了获取value使用key.

例子，

$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中动态声明变量名，所以最好使用创建一些css类map和@each循环。

使用以下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;
}