/ / LESS CSS - Ustawienie zmiennej w mixinie - css, mniej, mniej-mixinów

LESS CSS - Ustawienie zmiennej w mixinie - css, mniej, mniej-mixinów

Ostatnio zacząłem używać MNIEJ CSS - To jest niesamowite (polecam to sprawdzić, jeśli jeszcze nie masz).

Pracuję nad projektem, w którym chciałbym wykonać następujące czynności (nie jest to właściwa składnia, tylko próba wyjaśnienia mojego problemu):

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

Wiem, że mogę do tego użyć mixinów, ale powyższa metoda uchroniłaby mnie przed pisaniem miksów za każdym razem, gdy muszę zmienić kolor na podstawie @background_color zmienna (ponieważ będę używać @secondary_color dla granic, kolorów tła itp.).

Próbowałem znaleźć rozwiązanie, ale nie miałem szczęścia. Jeśli ktokolwiek ma jakiś pomysł na to, co mogę zrobić, aby ta praca, ja chciałbym je usłyszeć.

Dzięki!

Odpowiedzi:

5 dla odpowiedzi № 1

AKTUALIZACJA Ponownie przeczytałem Twój komentarz i lepiej zrozumiałem problem. To powinno działać:

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

Następnie użyj miksu:

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

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

DODANE WIĘCEJ KOMPAKTOWEJ WERSJI

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