web-dev-qa-db-fra.com

MOINS classes d'imbrication CSS

J'utilise MOINS pour améliorer mon 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 peux pas avoir le .g.posted travailler. il montre juste le .g peu. Si je fais ça, 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 nidifier le .posted dans .g bien que. Des idées?

cssnestedless
97
newbie_86

Le & Le caractère a la fonction d'un mot-clé this, en fait (une chose que je ne connaissais pas au moment d'écrire la réponse). Il est possible d'écrire:

.class1 {
    &.class2 {}
}

et le CSS qui sera généré ressemblera à ceci:

.class1.class2 {}

Pour la petite histoire, @grobitto a été le premier à publier cette information.

[RÉPONSE ORIGINALE]

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 ne sera appliqué que s’il s’agit d’un enfant d’un nœud de la classe class1.

J'ai également été confondu avec cela et ma conclusion est que MOINS a besoin d'un mot clé this :).

183
mingos
.g {
    &.posted {
    }
}

vous devriez ajouter "&" avant .posted

114
grobitto

Si l'esperluette est située juste à côté de l'élément enfant lors de l'imbrication, il est compilé dans un sélecteur de classe double. S'il y a un espace entre & et selector, il sera compilé dans le sélecteur enfant. En savoir plus sur l'imbrication dans Less here .

2
Nesha Zoric