Éclaircir la couleur de parent en Moins

Je suis partant avec de moins en Moins et une des raisons pour lesquelles je voulais d'est en raison de la ligthen() fonction. Donc, ma première tentative a été d'en faire quelque chose.

C'est mon HTML

<div class="box blue">
    <div class="boxbar">Foo</div>
    blue
</div>

J'ai finalement obtenu le travail, mais je doute que c'est censé être comme ceci:

@blue:   #468ACE;
@green:  #41A53D;
@red:    #9C2525;
@purple: #8938BF;

div 
{
    padding: 10px;
}

.blue { 
    background-color: @blue; 
    .boxbar { background-color: lighten(@blue, 10%); }
}
.green { 
    background-color: @green; 
    .boxbar { background-color: lighten(@green, 10%); }
}
.red { 
    background-color: @red; 
    .boxbar { background-color: lighten(@red, 10%); }
}
.purple { 
    background-color: @purple; 
    .boxbar { background-color: lighten(@purple, 10%); }
}

.boxbar 
{
    height: 10px;
}

Comment puis-je refactoriser cette? Il doit sûrement être plus facile de dire "tes parents de couleur, et d'alléger un peu". J'ai essayé plusieurs choses: l'héritage (a vaut le coup!), avoir les versions allégées à l'intérieur .wagon de marchandises. Mais de toute évidence, cela compilé .wagon de marchandises .bleu.. ce qui n'est pas ce que je veux et j'ai fini avec ce que vous pouvez voir ici.. il fonctionne.. mais il ne se sent pas bien. Alors j'aurais besoin d'écrire du code pour chaque nouvelle couleur, j'introduis..

OriginalL'auteur Gerben Jacobs | 2013-04-26

  1. 14

    Je ne suis pas complètement sûr de ce que votre solution souhaitée serait ... mais peut-être quelque chose comme faire un mixin qui pourrait vous aider d'avoir à écrire tellement ça.

    MOINS:

    .bgmixin(@color) {
    (~".@{color}") {
        background-color: @@color;
        .boxbar {
            background-color: lighten(@@color, 10%);
        }
    }
}

@blue: #468ACE;
@green: #41A53D;
@red: #9C2525;

.bgmixin("blue");
.bgmixin("green");
.bgmixin("red");

    CSS:

    .blue{
  background-color: #468ace;
}
.blue .boxbar {
  background-color: #6ea3d9;
}
.green{
  background-color: #41a53d;
}
.green .boxbar {
  background-color: #59c055;
}
.red{
  background-color: #9c2525;
}
.red .boxbar{
  background-color: #c52f2f;
}

    Mise à jour:

    Dans MOINS>=1.4 vous pouvez utiliser quelque chose comme cela pour interpoler le nom de la classe à partir du nom de la couleur:

    .bgmixin(@color) {
    @classname: ~"@{color}"; 
    .@{classname} {
        background-color: @@color;
        .boxbar {
            background-color: lighten(@@color, 10%);
        }
    }
}
    +1 Belle utilisation de la @@ caractéristique de référence dans le mixin. Très créatif.
    Ouais, c'est ce que je voulais. Ce qui ne l' @@ veux dire?
    merci =) vous savez probablement déjà que je reçois plutôt nerveux avec des solutions. @GerbenJacobs @@ est utilisée pour accéder à des variables définies avec les noms de variable. Rechercher sur lesscss.org Et je voulais juste ajouter, que pour MOINS de 1,4 vous voulez faire quelque chose comme cela pour le nom de la classe: @classname:~"@{color}"; .@{classname} {...

    OriginalL'auteur Martin Turjak