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

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

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

Например:

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

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

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

Ответ 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;
}

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

Ответ 2

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

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

Ответ 3

Вы можете использовать @import для загрузки своей темы! Поэтому common.less будет содержать все ваши стили по умолчанию, и к нему будет применен @themeColor.

.mainThemeDependentCss() {
  //file with all themed styles
  @import 'common.less';
}

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

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