MOINS css classes de nidification

Question

J'utilise MOINS pour améliorer mes css et j'essaye d'imbriquer une classe dans une classe. Il existe une hiérarchie assez compliquée, mais pour une raison quelconque, mon imbrication ne fonctionne pas. J'ai ceci:

 .g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}
 

Je ne parviens pas à faire fonctionner .g.posted . il montre simplement le bit .g . Si je le fais c'est bien:

 .g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }
 

J'aimerais imbriquer les .posted en .g bien. Des idées?

Answer 1

MOINS ne fonctionne pas de cette façon.

.class1.class2 {} - définit deux classes sur le même nœud DOM, mais

.class1 {
    .class2 {}
}

définit les nœuds imbriqués. .class2 sera appliquée si c'est un enfant d'un noeud avec la classe class1.

J'ai été confondu avec ce trop et ma conclusion est que de moins en MOINS besoin d'un this mot-clé :).

[MODIFIER]

Comme je l'ai été downvoted sans aucun commentaire ou une justification, je me sens obligé de réagir à ce que je ressens comme peut-être la cause de la downvote.

L' & personnage a la fonction d'un this mot-clé, en fait (une chose que je ne savais pas au moment de la rédaction de la réponse). Il est possible d'écrire:

.class1 {
    &.class2 {}
}

et le CSS généré ressemble à ceci:

.class.class2 {}

Pour l'enregistrement, @grobitto a été le premier à publier cette information.

Answer 2

 .g {
    &.posted {
    }
}
 

vous devriez ajouter "&" avant .posted