102 votes

MOINS css classes de nidification

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?

193voto

mingos Points 11608

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.

115voto

grobitto Points 561
 .g {
    &.posted {
    }
}
 

vous devriez ajouter "&" avant .posted

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X