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筆轉義字符

回答

相關問題