CSS笔转义字符

在手写笔，试图找出为什么循环中变量的使用是摆脱了“背景”的认识作为一个CSS选择器：

$primary = rgba(255,0,0,1) 
$primary-light = lighten($primary,15%) 
$primary-lighter = lighten($primary,40%) 
$primary-lightest = lighten($primary,65%) 
$primary-dark = darken($primary,15%) 
$primary-darker = darken($primary,40%) 
$primary-darkest = darken($primary,65%) 

for colors in primary 
    for vars in light lighter lightest dark darker darkest 
    .{colors} > .{vars} 
     background {colors}-{vars} /* here why not triggering */ 
     &:after 
     content \"@background\"

HTML

<body> 
     <div class="primary"> 
     <div class="lightest"></div> 
     <div class="lighter"></div> 
     <div class="light"></div> 
     <div class="dark"></div> 
     <div class="darker"></div> 
     <div class="darkest"></div> 
     </div> 
</body>

来源

2015-11-06 Nick Cawthon

您目前仍无法使用插值变量名，但你可以使用lookup BIF这里：

$primary = rgba(255,0,0,1) 
$primary-light = lighten($primary,15%) 
$primary-lighter = lighten($primary,40%) 
$primary-lightest = lighten($primary,65%) 
$primary-dark = darken($primary,15%) 
$primary-darker = darken($primary,40%) 
$primary-darkest = darken($primary,65%) 

for colors in primary 
    for vars in 'light' 'lighter' 'lightest' 'dark' 'darker' 'darkest' 
    .{colors} > .{vars} 
     background lookup('$' + colors + '-' + vars) // just build variable name from other vars values (don't forget about $ sign) 
     &:after 
     content \"@background\"

而且你应该使用字符串键，否则light和dark将内置的功能（他们已经定义）来处理。

我想你也可以看看hashes，他们更适合这个任务。

来源

2015-11-06 02:36:25 Panya

CSS笔转义字符

回答

相关问题