Moins CSS - Variable de réglage dans Mixin

Question

J'ai récemment commencé à utiliser Moins CSS - C'est génial (je vous recommande de le vérifier si vous ne l'avez pas encore fait).

Je travaille sur un projet, où je voudrais faire ce qui suit (ce n'est pas une syntaxe appropriée, c'est seulement pour essayer d'expliquer mon problème):

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

Je sais que je peux utiliser des mixins pour cela, mais la méthode ci-dessus m'éviterait de devoir écrire un mixins chaque fois que je dois changer une couleur en fonction de la @background_color variable (puisque j'utiliserai @secondary_color pour les bordures, les couleurs d'arrière-plan, etc.).

J'ai essayé de trouver une solution, mais je n'ai pas eu de chance. Si quelqu'un a une idée de ce que je peux faire pour que cela fonctionne, j'aimerais les entendre.

Merci!

Answer 1

METTRE À JOUR Je viens de relire votre commentaire et de mieux comprendre le problème. Cela devrait fonctionner:

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

Ensuite, utilisez le mixin:

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

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

Ajout d'une version plus compacte

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