2012-07-02 86 views
5

我剛剛進入LESS,想弄清楚如何在沒有mixin的情況下製作條件CSS語句。我發現我有很多單行的css語句只出現一次,但依賴於某些變量或條件,並且使用mixin有點沒有意義,因爲它永遠不會被重用。LESS CSS衛兵沒有混入

例子。

@add-margin: true; 

body { 
    margin-top: 20px; //I only want this if add-margin is true 
} 

所以最好我想這一點:

body when (@add-margin) { 
    margin-top: 20px; 
} 

但是,這並不工作。使用mixin工作,但似乎很愚蠢,只爲一個班輪做一個。有沒有其他辦法可以做到這一點?

謝謝

+3

您的代碼現在將與最新的較低版本編譯.. –

+0

@OnurYıldırım謝謝!除了'@ add-margin ='應該是'@ add-margin:',當然 – ptim

+1

@memeLab更正了。謝謝。 –

回答

1

不,這是不可能的形式。

你可以使用一個等於0或1的變量並乘以20,然後總是輸出一個規則,或者使用JavaScript(我建議你避免這種情況)將true轉換爲0或20並始終輸出規則,但如果你想要有條件地添加房產,則需要警衛。

8

是的,你可以,它類似於你的代碼。

@add-margin: true; 

.margin() when (@add-margin) { 
    margin-top: 20px; 
} 

body { .margin(); } 

UPDATE:使用較少的最新版本(1.5以上),達到這一目的,不需要「把守混入」的使用情況,您可以使用「CSS gaurds」來代替,因此OP的代碼將開箱即用

+2

請注意後面的內容:除「true」之外的任何內容都是虛假的,包括字符串「true」(引號內) – ptim

4

CSS Guards功能在Less v1.5.0中引入,因此現在我們可以使用與問題中提到的方式相同的方法。

@add-margin: true; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

如果情況下,需要分配多個這樣的性質來基於相同的變量不同的選擇器,它可以像下面使用&選擇器來實現。

& when (@add-margin){ 
    body{ 
     margin-top: 20px; 
    } 
    h1{ 
     margin-top: 10px; 
    } 
} 

注:正如在評論中提到由memeLab,爲@add-margin變量以外true任何價值considered as falsy。這是因爲true是一個關鍵字,而'true'是一個字符串值。例如,下面的內容不會輸出任何內容。

@add-margin: 'true'; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

但是,下面的內容會起作用,因爲它會進行字符串比較。

@add-margin: 'true'; 

body when (@add-margin = 'true'){ 
    margin-top: 20px; 
} 

如果您在使用更少的編譯器V1.5.0相比則更低發表Unicornist答案是最好的選擇。