Sass可變前綴

Question

SASS可以創建類似的東西嗎？

$prefix: * 

*-var1: 150px 
*-var2: 150px 
*-var3: 350px 

這可能是組織樣式表

Answer 1

在薩斯3.3有一些新的功能，可能會解決您的需要這樣做，大大與組織樣式幫助

你現在有了地圖，它可以讓你基本上創建包含變量的對象。

你可以做到以下幾點：

$colors: (
    header: #b06, 
    text: #334, 
    footer: #666777, 
) 

.header { 
    background-color: map-get($colors, header) 
} 

以及爲前綴的CSS選擇器，像這樣的新功能：

// Sass: 
.button { 
    &-primary { background: orange; } 
    &-secondary { background: blue; } 
} 

// Output: 
.button-primary { background: orange; } 
.button-secondary { background: blue; } 

延伸閱讀：http://thesassway.com/news/sass-3-3-released

Answer 2

絕對是非常有用的...

SASS：

$variableName: "myStyle"; 

#{$variableName}_r1{ border: 1px solid red; } 

主要生產CSS：

myStyle_r1 { 
    border: 1px solid red; 
} 

的關鍵是插值 - ＃{ $ VARIABLENAME} - 這基本上轉儲VARIABLENAME出來，因爲它是寫...