在列表中动态创建带有sass的变量

基本上，我试图生成很多样式，每个样式都包含图像和颜色。列出颜色并且变量以相同的方式命名。问题是我不能让Sass使用动态生成的名字（靠近{color}。但是可以这样使用吗？谢谢！在列表中动态创建带有sass的变量

$color-style-winter: #11111; 
$color-style-christmas: #22222; 

$styles: 'winter' 'hills', 
    'christmas' 'xmas'; 

@each $name, $image in $styles { 
    .style-#{$name} { 
     background: url('../../images/styles/#{$image}.jpg'); 
    } 

    a { 
     color: $color-style- + $name; 
    } 
}

来源

2017-08-06 Erwan de Ferrières

我不确定我是否理解你的问题充分但对SASS插值文档一看，所提供的文章使用占位符

的代码可能看起来像：。

%my-style-test1 {color: red;} 
%my-style-test2 {color: blue;} 

$style: 'test1' 'test2'; 

@each $name in $style { 

  a { 

    @extend %my-style-#{$name}; 

  } 

}

CSS：

a { 
     color: red; 
    } 

a { 
     color: blue; 
    }

的例子是有点用处，但展示了如何使用％placholder和插值

SASS Docs interpolation SASS Articel Interpolation

来源

2017-08-06 19:51:17 Michael

这是我做的第一个，但是编译器是不是就OK了：“未定义的变量：“$颜色风格 - “。' 我也尝试连接，但这不是使用变量值，只在变量名写入生成的CSS：颜色：unquote（'$ color-style-'+ $ name）;生成：颜色：$ color-style-christmas; –

http://krasimirtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables – Michael

再次感谢，但这不符合我的预期。我将继续使用3条目列表，这是目前最简单的解决方案！ –

在列表中动态创建带有sass的变量

回答

相关问题