2013-04-02 65 views

回答

12

Sass如何處理顏色取決於您使用的版本。但也有一些共同的行爲:

  • 薩斯將總是最大限度的向後兼容性只要有可能。由於關鍵字十六進制rgba有最廣泛的瀏覽器支持,所有顏色將被轉換爲這三種格式之一,優先對關鍵字或十六進制。只有當顏色具有alpha透明度時纔會使用rgba格式(如果指定rgba(0, 0, 0, 100),Sass會將其轉換爲black#000
  • 如果Sass必須使用關鍵字或十六進制格式進行選擇,將取決於輸出設置。 精簡版壓縮版模式將始終轉換爲十六進制,其他格式將使用關鍵字。
  • Sass將在壓縮的模式下(例如,#000000將輸出爲#000)將十六進制顏色轉換爲其3位數格式。

薩斯3.3及以上

薩斯只有當它們被用作變量轉換顏色或如果它們不是在的3種格式之一如上所述:

$color-hex: #000000; 
$color-keyword: black; 
$color-rgb: rgb(0, 0, 0); 
$color-hsl: hsl(0, 0, 0); 

.box-hex { 
    color: $color-hex; 
    background: #000000; 
} 

.box-keyword { 
    color: $color-keyword; 
    background: black; 
} 

.box-rgb { 
    color: $color-rgb; 
    background: rgb(0, 0, 0); 
} 

.box-hsl { 
    color: $color-hsl; 
    background: hsl(0, 0, 0); 
} 

輸出:

.box-hex { 
    color: black; 
    background: #000000; 
} 

.box-keyword { 
    color: black; 
    background: black; 
} 

.box-rgb { 
    color: black; 
    background: black; 
} 

.box-hsl { 
    color: black; 
    background: black; 
} 

薩斯3.4及更高版本

從3.3到3.4的唯一變化是,當使用變量時,Sass將保留顏色的格式,除非它是關鍵字,十六進制或rgba格式以外的格式。

.box-hex { 
    color: #000000; 
    background: #000000; 
} 

但如果我真的需要特定的格式?

如果你絕對必須有特定的格式,你可以把它變成一個字符串:

$color: #{'#F00'}; // or `unquote('#F00')` 
.foo { 
    color: $color; 
} 

輸出:

.foo { 
    color: #F00; 
} 

請記住,當你這樣做,你的「色「將不適用於顏色處理功能,如lighten()darken()

相關問題