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 数据类型(如数字、字符串、颜色、 bool 值、映射、值列表、空)。

   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 also provides map-get() to get the value using 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 中动态声明变量名，所以最好使用 map 和 @each 创建一些 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;
}