Создайте список переменных в LESS для вариантов цветов на основе базового цвета.

В нашем проекте мы используем список переменных LESS. В этом списке у нас есть несколько цветов. Например это:

@color-gray: #B9B9BA;

@color-gray-light: lighten(@color-gray, 10%);
@color-gray-lighter: lighten(@color-gray, 20%);
@color-gray-lightest: lighten(@color-gray, 25%);
@color-gray-dark: darken(@color-gray, 10%);
@color-gray-darker: darken(@color-gray, 20%);
@color-gray-darkest: darken(@color-gray, 25%);

Кроме этого серого, у нас есть и другие цвета. Поэтому я хотел бы сделать миксин, который составляет этот список переменных для других цветов.

Определен первый цвет. Например: @color-purple: #915E9F; и я хочу, чтобы микширование создавало остальные переменные исключительно на основе этой переменной.

// Color - Purple    
@color-purple: #915E9F;

// Color variants generated by LESS for purple
@color-purple-light: lighten(@color-purple, 10%);
@color-purple-lighter: lighten(@color-purple, 20%);
@color-purple-lightest: lighten(@color-purple, 25%);
@color-purple-dark: darken(@color-purple, 10%);
@color-purple-darker: darken(@color-purple, 20%);
@color-purple-darkest: darken(@color-purple, 25%);

Эти переменные позже будут использоваться во всем приложении для создания стилей для кнопок, заголовков и т. д. У меня уже есть микширование, которое создает эти кнопки, заголовки, варианты.


css less less-mixins
person Tommy Hoogeveen    schedule 22.06.2016    source источник
comment
К сожалению, насколько мне известно, имена динамических переменных не являются частью LESS.   -  person Arathi Sreekumar    schedule 22.06.2016

Ответы (2)


arrow_upward
1
arrow_downward

Это ты хочешь сделать?

@color-gray: #B9B9BA;


.colorset(@color) {
  @color-light: lighten(@color, 10%);
  @color-lighter: lighten(@color, 20%);
  @color-lightest: lighten(@color, 25%);
  @color-dark: darken(@color, 10%);
  @color-darker: darken(@color, 20%);
  @color-darkest: darken(@color, 25%);
}


.class{
  .colorset(@color-gray);
  color:@color-light;
}

Демо: http://codepen.io/blonfu/pen/ezBEje

person Community    schedule 22.06.2016
comment
Это немного отличается от того, что я думал, но это все равно будет работать так, как я задумал. Очень здорово, спасибо. - person Tommy Hoogeveen; 22.06.2016

arrow_upward
0
arrow_downward

Насколько я знаю, в миксине нельзя создавать динамические переменные. Но если вы хотите переосмыслить свою логику, вы можете сделать что-то вроде этого:

.color-light (@colorItem) {
  @color-light: lighten(@colorItem, 10%);
}
.color-lighter (@colorItem) {
  @color-lighter: lighten(@colorItem, 20%);
}
.color-lightest (@colorItem) {
  @color-lightest: lighten(@colorItem, 25%);
}
.color-dark (@colorItem) {
  @color-dark: darken(@colorItem, 10%);
}
.color-darker (@colorItem) {
  @color-darker: darken(@colorItem, 20%);
}
.color-darkest (@colorItem) {
  @color-darkest: darken(@colorItem, 25%);
}

.class{
  .color-light(@color-gray);
  color:@color-light;
}
person Arathi Sreekumar    schedule 22.06.2016
comment
Это довольно прискорбно. Мы создаем приложение React, и я хочу оставить большинство классов стилей вне шаблонов. Это просто означает, что мне придется определить список переменных вручную, все в порядке. :-) - person Tommy Hoogeveen; 22.06.2016