基於CSS class的LESS條件設置LESS變量

我需要設置Less變量以匹配網站的活動主題，即每個主題具有不同的顏色。基於CSS class的LESS條件設置LESS變量

我想根據定義主題的HTML正文CSS類將@themeColor設置爲正確的顏色。

例如：

body.themeBlue { @themeColor: blue; } 
body.themeRed { @themeColor: red; }

這樣，我只需要使用其他較少文件內@themeColor變量。

任何人都可以幫忙嗎？根據這個（http://www.lesscss.org/#-scope）有可能做這樣的事情，但我不能讓它工作。這裏發生了什麼？

來源

2013-03-12 kingarthurpt

除非你正在處理的文件少客戶機側，這是不可能的，因爲一個事實，即更少的文件將被編譯服務器端。 – Christoph 2013-03-12 17:01:28

謝謝你的回答。我沒有想到這一點。 – kingarthurpt 2013-03-12 17:54:26

LESS文件無法在運行時讀取應用於html body元素的實際類（您可能需要實現一個JavaScript解決方案來執行類似操作）。

如果你只是想要基於body類的所有主題css準備好使用，最好的方法來實現這一點，在mixin中具有所有必要的基於主題的css，然後將其應用於主題類下。這減少了代碼重複。例如：

LESS

//mixin with all css that depends on your color 
.mainThemeDependentCss() { 
    @contrast: lighten(@themeColor, 20%); 
    h1 {color: @themeColor;} 
    p {background-color: @contrast;} 
} 

//use the mixin in the themes 
body.themeBlue { 
    @themeColor: blue; 
    .mainThemeDependentCss(); 
} 

body.themeRed { 
    @themeColor: red; 
    .mainThemeDependentCss(); 
}

CSS輸出

body.themeBlue h1 { 
    color: #0000ff; 
} 
body.themeBlue p { 
    background-color: #6666ff; 
} 
body.themeRed h1 { 
    color: #ff0000; 
} 
body.themeRed p { 
    background-color: #ff6666; 
}

對於使用方面或主題化的方式處理一些其他的回答，請參閱：

來源

2013-03-12 17:56:02 ScottS

非常感謝，它的作品！這將允許我編寫更少的代碼。我不想在整個模板中複製代碼5次。 – kingarthurpt 2013-03-12 18:04:57

是的，LESS和其他預處理器的要點是「少」代碼重複。 – ScottS 2013-03-12 19:12:38

Mabbe最好將@themeColor作爲mixin參數傳遞給它？ – 2014-08-11 11:34:25

Less中的變量實際上是常量，只會定義一次。

範圍在其代碼大括號內工作，因此您需要將CSS嵌套在每個想要的主題中（這意味着重複）。

這不是理想的，你需要做的是：

body.themeBlue { 
    @color: blue; 
    /* your css here */ 
} 

body.themeRed { 
    @color: red; 
    /* your css here AGAIN :(*/ 
}

你可以，不過，要使用變量是這樣的：

@color: black; 
@colorRed: red; 
@colorBlue: blue; 

h1 { 
    color: @color; // black 
    body.themeRed & { 
    color: @colorRed; // red 
    } 
    body.themeBlue & { 
    color: @colorBlue; // blue 
    } 
}

你只需要聲明的顏色一次，但你需要不斷做「body.themered」等前綴，其中顏色因主題而異。

來源

2013-03-12 17:27:05

我試圖寫更少的代碼，而不必重複任何東西，但似乎我不能。：/ 謝謝你的回答。 – kingarthurpt 2013-03-12 17:53:19

基於CSS class的LESS條件設置LESS變量

回答

相關問題