css - 想要获取一个 scss 关联数组并从中生成变量和类

Question

这主要是一个语法问题，我很确定我能做到，但我不知道在 for 循环中取消引用、声明变量和连接字符串的最佳方法。本质上，虽然我想使用我制作的这张 map 并生成颜色变量以及一些将分配字体颜色和背景颜色等样式的类。

$color-collection: ('white': '#FFFFFF', 'black': '#000000', 'goldenrod': '#F59600');
@for $i from 0 to length($color-collection) {


//create a variable for each color name, e.g. $white: #FFFFFF;
//create a class for each variable name with a style, e.g. .bg-color-white {background-color: $white;}

}

Answer 1

首先你需要使用@each而不是@for。

其次，您可以在循环本身中获取所需的两个变量。第一个变量是键，第二个变量是值。

第三，我们可以使用 sass 插值将变量包含在类名中，并在选择器中取消对值的引用。我想你也可以为此使用 unqote($color-value)，或者你可以只在数组中写下你的颜色值而不用引号。

Se 下面的示例。

$color-collection: ('white': '#FFFFFF', 'black': '#000000', 'goldenrod': '#F59600');
@each $color-name, $color-value in $color-collection {

  .bg-color-#{$color-name} {
    background-color: #{$color-value};
  }
//create a variable for each color name, e.g. $white: #FFFFFF;
//create a class for each variable name with a style, e.g. .bg-color-white {background-color: $white;}

}

http://sassmeister.com/gist/e321b7e36ed0e74cd2ce

由于您使用的是 libsass，因此这里有一些代码可以使用旧的 Sass 语法:

$color-collection: ('white' '#FFFFFF'), ('black' '#000000'), ('goldenrod' '#F59600');
@each $color in $color-collection {
  $color-name: nth($color, 1);
  $color-value: nth($color, 2);
  .bg-color-#{$color-name} {
    background-color: #{$color-value};
  }
}

http://sassmeister.com/gist/28caaf9d5e644d5db0cc