/ / LESS CSS - Настройка на променлива в mixin - css, less, less-mixins

LESS CSS - Задаване на променлива в mixin - css, по-малко, по-малко миксини

Наскоро започнах да използвам По-малко CSS - това е страхотно (препоръчвам ви да го проверите, ако още не сте го направили).

Работя по проект, където бих искал да направя следното (не е подходящ синтаксис, само да опитам да обясня проблема си)

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

Знам, че мога да използвам mixins за това, но горният метод ще ме спаси от необходимостта да пиша миксини всеки път, когато трябва да променя цвета си въз основа на @background_color променлива (тъй като ще използвам @secondary_color за граници, фонови цветове и т.н.).

Опитвах се да намеря решение, но нямах късмет. Ако някой има някаква идея „какво мога да направя, за да направя тази работа, аз бих искал да ги чуя.

Благодаря!

Отговори:

5 за отговор № 1

UPDATE Просто препрочитам вашия коментар и по-добре разбирам проблема. Това трябва да работи:

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

След това използвайте mixin:

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

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

ДОБАВЕНИ ПОВЕЧЕ COMPACT VERSION

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