3
Sass在我的css文件中輸出#000和#fff作爲黑白顏色值。例如:爲什麼Sass會改變我的顏色格式?
$color: #000;
.box {
color: $color;
}
輸出到:
.box {
color: black;
}
不應該輸出的十六進制值?
Sass在我的css文件中輸出#000和#fff作爲黑白顏色值。例如:爲什麼Sass會改變我的顏色格式?
$color: #000;
.box {
color: $color;
}
輸出到:
.box {
color: black;
}
不應該輸出的十六進制值?
Sass如何處理顏色取決於您使用的版本。但也有一些共同的行爲:
rgba(0, 0, 0, 100)
,Sass會將其轉換爲black
或#000
)#000000
將輸出爲#000
)將十六進制顏色轉換爲其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.3到3.4的唯一變化是,當使用變量時,Sass將保留顏色的格式,除非它是關鍵字,十六進制或rgba格式以外的格式。
.box-hex {
color: #000000;
background: #000000;
}
如果你絕對必須有特定的格式,你可以把它變成一個字符串:
$color: #{'#F00'}; // or `unquote('#F00')`
.foo {
color: $color;
}
輸出:
.foo {
color: #F00;
}
請記住,當你這樣做,你的「色「將不適用於顏色處理功能,如lighten()
或darken()
。