2012-05-18 25 views
0

我知道,在LESS CSS中沒有if/else,並且需要if/else的用例意味着使用保護的mixin來解決。減少CSS依賴於給定變量的不同規則

我想爲我的CSS配置文件,我可以在其中配置字體大小,字體家族,字體重量和行高。 我也想有可能不定義上述屬性之一。

這是第一個問題。是否有可能檢查變量是否存在? 我使用無效值來定義不應該設置的屬性(如字體系列的數字)

現在我想根據給定的值創建CSS。 如果所有4給出:

font: @font-weight @font-size~'/'@line-height @font-family; 

如果沒有給出@ FONT-FAMILY:

font-size: @font-size; 
font-weight: @font-weight; 
line-height: @line-height; 

等。

對於每種可能的組合,都有一個mixin,看起來很笨拙。

這是問題沒有。 2.

所以其實我想這個工作:

@font-size: 1em; 
@font-weight: bold; 
@font-family: Arial, sans-serif; 

body { 
    .myMixin(@font-weight, @font-size, @line-height, @font-family); 
} 

應該輸出:

body { 
    font: bold 1em Arial, sans-serif; 
} 

解決這個任何想法? 或者你認爲我想要做的通常是一個壞主意?如果是,爲什麼?

〜戴夫

+0

您是否考慮過構建自定義的PHP *預處理器*,以自動生成從某種LESS模板開始的LESS文件? –

+0

我認爲你工作太辛苦來壓縮你的CSS輸出。這很容易解決,如果你很高興你的字體樣式將被拆分爲單獨的行,家庭,大小,重量。讓最小化者盡其所能,不要擔心。或者,如果它真的對你很重要,那麼創建兩個mixin。 – GeekyMonkey

+0

LESS最小化程序不合並這些語句。我只想知道是否有一種方法可以以相當簡單的方式達到我想要的效果。但你可能說得對,這並不重要。 – dave

回答

1

要是少正在通過JavaScript在客戶端上進行評估,那麼它可以包含通過使用回蜱JavaScript代碼。在腳本中,您可以檢查空白值並生成一個字符串作爲輸出。

如果您在服務器上使用Less.NET並將其轉換爲CSS,則無法執行此javascript評估。

+0

我的LESS-文件是用NodeJS解析的,所以這可以工作。但我無法找出一種方法來檢查是否設置了LESS變量。 '「@ {p}」。length> 0?「@ {p}」:false「如果沒有設置@p,則會引發錯誤。 – dave

+0

你可以爲你的mixin參數指定一個默認值。像.MyMixin(@p:「」)。然後測試該默認值。請參閱tinkerbin:http://tinkerbin.com/VB60OZaI在tinkerbin上,您必須將css格式從「普通」更改爲「較少」,然後按下RUN鍵。 – GeekyMonkey