少變量存在於編寫CSS（僅適用於多種顏色操作）

-1

我是新來的少，而現在，我試圖找出了這一點：少變量存在於編寫CSS（僅適用於多種顏色操作）

我加了可變@component-hover-bg多色操作：

@component-hover-bg {background: lighten(desaturate(@brand-primary-four, 25%), 50%)}

當我編譯少的文件，這個特定的變量在我的CSS彈出：

@component-hover-bg { background: #b1d3ec; }

正如你可以想像，我不希望在我的CSS變量。我怎樣才能解決這個問題？我知道我可以把它當作mixin，並使用()將它從CSS中排除，但這不合邏輯，因爲它畢竟是一個變量。

來源

2016-06-17 Martijn Wijmer

無法真正理解你在做什麼。你在做什麼，期望的產出是多少？ – Harry

我想根據變量（@ brand-primary-four）來計算變量背景顏色。計算是正確的（背景：＃b1d3ec;）但我不希望這個變量在我編譯的CSS（@ component-hover-bg）中。 –

那你爲什麼不這樣做呢？ '@ component-hover-bg：減輕（desaturate（@ brand-primary-four，25％），50％）;'並且像'.yourselector {background：@ component-hover-bg; }'？ – Harry

正如我在評論中所述，您當前使用的語法不正確。以下不是變量聲明語法。它跟隨變量名沒有:，因此沒有賦值。編譯器實際上將它視爲CSS規則或指令（如@media查詢），並在{}塊中提供相關規則。

@component-hover-bg { 
    background: lighten(desaturate(@brand-primary-four, 25%), 50%); 
}

減少編譯器不會輸出變量到編譯後的CSS文件中。但它總是必須按原樣輸出所有規則（如@media,@namespace,@keyframes等），而不是壓制。因此這會得到輸出到CSS文件。

如果你想在一個主要變量進行兩種顏色的操作，將其值設置爲另一個變量，然後用它作爲值的屬性，那麼正確的語法如下：

@component-hover-bg: lighten(desaturate(@brand-primary-four, 25%), 50%); /* calculate, assign to variable */ 
.yourselector { 
    background: @component-hover-bg; /* use the secondary variable as the property's value */ 
}

或者，如果你想屬性+值對設置爲變量，那麼你可以使用detached rulesets功能如下圖所示：

@component-hover-bg: { 
    background: lighten(desaturate(@brand-primary-four, 25%), 50%); /* set value to property */ 
}; 
.yourselector { 
    @component-hover-bg(); /* include the ruleset */ 
}

但第二個選項是過於嚴格。如果你有一組屬性，並且所有這些屬性都需要設置爲多個選擇器，那麼你可以使用這個選項，但是使用變量+值（第一個選項）要好得多，因爲你可以隨意使用變量的值（如分配屬性值，附加計算等）。

來源

2016-06-17 11:38:56 Harry

少變量存在於編寫CSS（僅適用於多種顏色操作）

回答

相關問題