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中进行修正。

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

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中动态声明变量名称，因此最好使用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;
}

Answer 2

您无法在scss中创建动态变量。你可以做的是将变量名转换为类名，并在任何地方使用它。您在@each中也遇到了语法问题。这是关键，价值所以你的每一个都是$ 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动态变量名称和嵌套循环抛出错误

2 个答案: