web-dev-qa-db-fra.com

Définition de variables variables à l'aide de CSS MOINS

Disons que j'ai trois schémas de couleurs distincts qui sont utilisés sur différentes pages d'un site. Chaque couleur a une teinte claire, moyenne et foncée définie, et le jeu de couleurs est défini par une classe dans le corps. Supposons que le jeu de couleurs "rouge" soit celui par défaut. Comme ça:

Définitions des couleurs:

@red-lt:   #121;
@red-md:   #232;
@red-dk:   #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt:  #787;
@blue-md:  #898;
@blue-dk:  #909;

Exemple de style par défaut de base

body { background-color: @red-dk;
  #container { background-color: @red-md;
     p { color: @red-dk; }
  }
}

Exemple de style de schéma de couleurs différentes

body.green { background-color: @green-dk;
  #container { background-color: @green-md;
     p { color: @green-dk; }
  }
}

Je voudrais utiliser des variables pour ne pas avoir à réécrire toutes les variations de couleurs pour chaque schéma, afin de pouvoir simplement écrire quelque chose comme ceci:

body.[color-var] { background-color: @[color-var]-dk;
  #container { background-color: @[color-var]-md;
     p { color: @[color-var]-dk; }
  }
}

… Mais je n'arrive pas à comprendre comment y parvenir. Aidez-moi…?

cssless
42
Kerri

Utilisez interpolation et échappement , parenthèses dans le sélecteur et mixins paramétriques pour obtenir l'effet souhaité:

  • Variables dynamiques par interpolation : Dans une chaîne, "@{variable}" est remplacé par la valeur de la variable. Ils peuvent également être imbriqués: Étant donné @{@{var}-foo} et @var: bar;, le résultat est "barfoo".
    La valeur résultante est indiquée. Pour supprimer ces guillemets, préfixez ~.
  • Sélecteurs dynamiques par interpolation du sélecteur : body.@{var} se transforme en body.bar.

Exemple:

@red-md:   #232;
@red-dk:   #343;

.setColor(@color) {
    body.@{color} { background-color: ~"@{@{color}-dk}";
        #container { background-color: ~"@{@{color}-md}";
         p { color: ~"@{@{color}-md}"; }
      }
    }
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..

Se transforme en:

body.red {
  background-color: #334433;
}
body.red #container {
  background-color: #223322;
}
body.red #container p {
  color: #223322;
}

Remarque: Lorsque la réponse a été écrite à l'origine, l'interpolation de sélecteur n'existait pas. Voir la révision précédente pour la solution si vous travaillez avec un ancien compilateur LESS (avant LESS 1.3.1a). La prise en charge de l'ancienne méthode sera supprimée dans MOINS 1.4.0.

76
Rob W

Si ces valeurs suivent vraiment un format prévisible comme celui-ci, cela semble être un cas parfait pour un mixin paramétrique :

Moins:

@red:   #232;
@green: #565;
@blue:  #898;


.theme (@color) {
  background-color: @color - #111;
  #container {
    background-color: @color;
    p { color: @color + #111; }
  }
}

body.red {
  .theme(@red);
}

CSS compilé:

body.red{background-color:#112211;}
body.red #container{background-color:#223322;}
body.red #container p{color:#334433;}
7
steveax

Je sais que cette question est assez ancienne, mais pour ceux qui viennent à ce poste, ma réponse peut peut-être aider

Je ne suis pas vraiment sûr de ce que vous voulez utiliser, mais l'une de mes suggestions est basée sur la réponse de @ScottS. Dans mon monde réel, je dois créer une application Web, où elle montrerait plusieurs marques et chaque marque a sa propre couleur de texte, son arrière-plan, etc. ... alors j'ai commencé à chercher un moyen d'y parvenir en MOINS, ce que je pourrait facilement faire sur SASS et le résultat est ci-dessous:

MOINS

// Code from Seven Phase Max
// ............................................................
// .for
.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i)                  {.-each(extract(@array, @i))}


// Brands
@dodge : "dodge";
@ford : "ford";
@chev : "chev";

// Colors
@dodge-color : "#fff";
@ford-color : "#000";
@chev-color : "#ff0";

// Setting variables and escaping than
@brands: ~"dodge" ~"ford" ~"chev";

// Define our variable   
.define(@var) {
  @brand-color: '@{var}-color';
}

// Starting the mixin
.color() {
    // Generating the loop to each brand
    .for(@brands); .-each(@name) {
        // After loop happens, it checks what brand is being called
        .define(@name);
         // When the brand is found, match the selector and color
        .brand-@{name} & {
            color: @@brand-color;
        }
    }
}

.carColor {
    .color();
}

Le résultat sera:

CSS

.brand-dodge .carColor {
    color: "#fff";
}
.brand-ford .carColor {
    color: "#000";
}
.brand-chev .carColor {
    color: "#ff0";
}

C'est très délicat et j'ai dû utiliser plusieurs éléments pour obtenir ce dont j'avais besoin, j'ai d'abord utilisé un ensemble de mixins fournis par Seven Phase Max et vous pouvez le trouver ici et que, la réponse @ScottS était la pièce qui manquait à mon puzzle ... j'espère que cela vous aidera, vous et les autres, qui doivent créer un ensemble de variables pour faire partie d'une autre variable et créer un fichier moins dynamique.

Vous pouvez copier tout mon code et tester sur http://lesstester.com/

5
Paulo Griiettner

Essaye ça

@red-lt:   #121;
@red-md:   #232;
@red-dk:   #343;
@green-lt: #454;
@green-md: #565;
@green-dk: #676;
@blue-lt:  #787;
@blue-md:  #898;
@blue-dk:  #909;

@color: 'red-lt';

div{
background: @@color;
border: 1px solid lighten(@@color,20%);
}
1
user3155224

À ma connaissance, noms de variables variables ne sont pas pris en charge dans MOINS. Vous pouvez cependant restructurer vos déclarations de manière plus sémantique:

/* declare palette */
@red-lt:   #121; 
@red-md:   #232; 
@red-dk:   #343; 
@green-lt: #454; 
@green-md: #565; 
@green-dk: #676; 
@blue-lt:  #787; 
@blue-md:  #898; 
@blue-dk:  #909; 

/* declare variables based on palette colors */
@lt: @red-lt;
@md: @red-md;
@dk: @red-dk;

/* ...and only use them for main declarations */
body { background-color: @dk;        
  #container { background-color: @md;        
     p { color: @dk; }        
  }        
}

Cela devrait vous permettre de basculer entre les palettes sans douleur en évitant les références de couleur explicites.

0
o.v.