LESS CSS - установка переменной в миксине - PullRequest
Новая
       19

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

4 голосов
/ 29 февраля 2012

Я недавно начал использовать МЕНЬШЕ CSS - это круто (я рекомендую вам проверить это, если вы еще не сделали).

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

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

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

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

Спасибо!

1 Ответ

5 голосов
/ 29 февраля 2012

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

.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);
}
...