Question

这主要是一个语法问题，我很确定我能做到这一点，但我不知道在for循环中取消引用，声明变量和连接字符串的最佳方法。基本上虽然我想拍摄这张地图，但我会为颜色生成变量，以及一些会分配样式的类，如font-color和background-color。

$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)，或者您可以在数组中编写颜色值而不使用引号。

以下示例。

$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

想要使用scss assoicated数组并从中生成变量和类

1 个答案: