LESS CSS — установка переменной в миксине

Недавно я начал использовать LESS CSS — это здорово (рекомендую вам ознакомиться с ним, если вы еще этого не сделали).

Я работаю над проектом, где я хотел бы сделать следующее (это неправильный синтаксис, это только попытка объяснить мою проблему):

if(lightness(@background_color) <= 50%)
{
    @secondary_color = #fff;
}
else
{
    @secondary_color = #000;
}

Я знаю, что могу использовать миксины для этого, но описанный выше метод избавит меня от необходимости писать миксины каждый раз, когда мне нужно изменить цвет на основе переменной @background_color (поскольку я буду использовать @secondary_color для границ, цветов фона и т. д.) .

Я пытался найти решение, но мне не повезло. Если у кого-нибудь есть какие-либо идеи о том, что я могу сделать, чтобы заставить эту работу работать, я хотел бы услышать их.

Спасибо!


css less less-mixins
person Nicholas LeBlanc    schedule 28.02.2012    source источник
comment
Взгляните на раздел о сопоставлении шаблонов и защитных выражениях.   -  person john    schedule 29.02.2012
comment
Спасибо за ответ. Единственная проблема заключается в том, что я ограничен одним свойством CSS для каждого охранника. Я буду использовать @secondary_color для границ, цветов шрифта, фона и т. д. Если бы я пошел по этому пути, мне нужно было бы установить защиту/примесь для каждого свойства (цвет фона, цвет, цвет границы и т. д.) потому что я не обязательно буду устанавливать каждое из этих свойств одновременно (например, для одного элемента я хочу изменить только цвет текста, а для другого я хочу только установить цвет границы). Это то, чего я пытаюсь избежать, если это вообще возможно.   -  person Nicholas LeBlanc    schedule 29.02.2012

Ответы (1)


arrow_upward
5
arrow_downward

ОБНОВЛЕНИЕ Я только что перечитал ваш комментарий и лучше понял проблему. Это должно работать:

.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = color){
  color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = background){
  background-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = border){
  border-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) and (@prop = all){
  color: black;
  background-color: black;      
  border-color: black;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = color){
  color: white
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = background){
  background-color: white;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = border){
  border-color: white;
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) and (@prop = all){
  color: white;
  background-color: white;      
  border-color: white;
}

Затем используйте миксин:

.class1 {
  .secColor (#fff, color) //should only set the color property for class1
}

.class2 {
  .secColor (#000, all) //should set all three properties for class2
}

ДОБАВЛЕНА БОЛЕЕ КОМПАКТНАЯ ВЕРСИЯ

.propSwitch (@prop, @clr) when (@prop = color) {
  color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = background) {
  background-color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = border) {
  border-color: @clr;
}
.propSwitch (@prop, @clr) when (@prop = all) {
  color: @clr;
  background-color: @clr;      
  border-color: @clr;
}
.secColor (@bgc, @prop) when (lightness(@bgc) >= 50%) {
  .propSwitch (@prop, #000);
}
.secColor (@bgc, @prop) when (lightness(@bgc) < 50%) {
  .propSwitch (@prop, #fff);
}
person ScottS    schedule 29.02.2012
comment
Отличное решение, я не подумал об этом. Спасибо за ответ Скотт! - person Nicholas LeBlanc; 29.02.2012
comment
@N.LeBlanc - рад, что тебе понравилось. Я только что обновил то, что, по моему мнению, является более компактным способом написать это. - person ScottS; 29.02.2012