LESS condition basée sur la classe CSS pour définir une variable LESS

J'ai besoin de Moins variable pour correspondre le site web du thème actif, c'est à dire, chaque thème a une couleur différente.

J'aimerais set @themeColor de la bonne couleur, basé sur le code HTML du corps de la classe CSS qui définit le thème.

Par exemple:

body.themeBlue { @themeColor: blue; }
body.themeRed { @themeColor: red; }

De cette façon, j'avais seulement besoin d'utiliser le @themeColor variable à l'intérieur de l'autre Moins de fichiers.

Peut aider quelqu'un?
Selon cette ( http://www.lesscss.org/#-scope ), il est possible de faire quelque chose comme ça, mais je ne peux pas le faire fonctionner. ce qui se passe ici?

source d'informationauteur kingarthurpt | 2013-03-12

  1. 18

    Le MOINS de fichiers ne peut pas lire à la classe réelle appliquée à l'html body élément au moment de l'exécution (vous aurez probablement besoin de mettre en œuvre une solution d'activer javascript pour faire quelque chose comme ça).

    Si vous voulez simplement avoir du tout sur le thème css prêt à utiliser en fonction de la body classe, la meilleure façon de mettre en œuvre ce pour avoir tout le nécessaire thème css dans un mixin, puis l'appliquer sous le thème des classes. Cela réduit la duplication de code. Par exemple:

    MOINS

    //mixin with all css that depends on your color
.mainThemeDependentCss() {
  @contrast: lighten(@themeColor, 20%);
  h1 {color: @themeColor;}
  p {background-color: @contrast;}
}

//use the mixin in the themes
body.themeBlue {
  @themeColor: blue;
  .mainThemeDependentCss();
}

body.themeRed {
  @themeColor: red;
  .mainThemeDependentCss();
}

    CSS Sortie

    body.themeBlue h1 {
  color: #0000ff;
}
body.themeBlue p {
  background-color: #6666ff;
}
body.themeRed h1 {
  color: #ff0000;
}
body.themeRed p {
  background-color: #ff6666;
}

    Pour certains autres réponses qui traitent des aspects ou des façons de thématisation, voir:

  2. 4

    Variables en Moins sont en fait des constantes et ne seront définis une fois pour toutes.

    Champ d'application les œuvres à l'intérieur de son code entre accolades, de sorte que vous devez à votre nid CSS à l'intérieur de chaque thème que vous voulez (ce qui signifie la duplication).

    Ce n'est pas l'idéal que vous auriez besoin pour ce faire:

    body.themeBlue {
  @color: blue;
  /* your css here */
}

body.themeRed {
  @color: red;
  /* your css here AGAIN :( */
}

    Vous pouvez, cependant, essayez d'utiliser des variables comme ceci:

    @color: black;
@colorRed: red;
@colorBlue: blue;

h1 {
  color: @color; //black
  body.themeRed & {
    color: @colorRed; //red
  }
  body.themeBlue & {
    color: @colorBlue; //blue
  }
}

    Vous n'aurez qu'à déclarer les couleurs une fois, mais vous devez constamment faire le "corps.themeRed" etc. les préfixes dont la couleur varie en fonction du thème.