Условие LESS на основе класса CSS для установки переменной LESS

Question

Мне нужно установить переменную Less в соответствии с активной темой веб-сайта, то есть каждая тема имеет другой цвет.

Я хотел бы установить @themeColor на правильный цвет, основываясь на CSS-классе тела HTML, который определяет тему.

Например:

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

Таким образом, мне нужно только использовать переменную @themeColor в других меньше файлов.

Может ли кто-нибудь помочь? В соответствии с этим (http://www.lesscss.org/#-scope) можно сделать что-то подобное, но я не могу заставить его работать. Что здесь происходит?

Answer 1

Файл LESS не может прочитать фактический класс, примененный к элементу html body во время выполнения (вам, вероятно, потребуется реализовать решение javascript, чтобы сделать что-то подобное).

Если вы просто хотите, чтобы все тематические css были готовы к использованию на основе класса body, лучший способ реализовать это, чтобы иметь все необходимые CSS-темы на основе mixin, а затем применить его под тематическими классами. Это уменьшает дублирование кода. Например:

МЕНЬШЕ

//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; 
} 

Для некоторых других ответов, которые имеют дело с различными аспектами или способы тематизации, см:

• LESS CSS - Change variable value for theme colors depending on body class
• LESS.css variable depending on class
• LESS CSS: abusing the & Operator when nesting?

Answer 2

Переменные в Менее являются константами и будут определены только один раз.

Сфера работает в рамках своих фигурных скобок, поэтому вам нужно будет вложить свои 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» и т. д. префиксы, где цвет меняется в зависимости от темы.