MOINS de classes d'imbrication CSS

101

J'utilise LESS pour améliorer mon CSS et j'essaie d'imbriquer une classe dans une classe. Il y a 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 le .g.postedfaire travailler. ça montre juste le .gpeu. Si je fais ça, ça va:

.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;
         }
    }

Je voudrais imbriquer le .posteddans .gbien. Des idées?

css nested less newbie_86
la source

Réponses:

192

Le &personnage a en fait la fonction d'un thismot - clé (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 qui sera généré ressemblera à ceci:

.class1.class2 {}

Pour mémoire, @grobitto a été le premier à publier cette information.

[RÉPONSE ORIGINALE]

LESS 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. .class2ne sera appliqué que s'il s'agit d'un enfant d'un nœud avec la classe class1.

J'ai été confondu avec cela aussi et ma conclusion est que LESS a besoin d'un thismot - clé :).

mingos
la source
5
sassa cette fonctionnalité intégrée avec l'opérateur &.
sevenseacat
2
LESS est toujours génial, en particulier le préprocesseur PHP LESS, avec sa syntaxe modifiée et plus flexible. Mais jusqu'à ce qu'il y ait une sorte de syntaxe communément acceptée, de tels problèmes surgiront de temps en temps. À mon avis, celui-ci est le seul inconvénient de MOINS.
mingos
1
@ newbie_86 Vous ne pouvez pas mélanger la syntaxe sass et la syntaxe css native. La migration vers Sass nécessite donc une réécriture complète de vos styles, alors qu'en moins vous pouvez déjà compiler vos styles existants et commencer à les réécrire morceau par morceau.
topless
1
J'étais curieux de savoir pourquoi la deuxième réponse avait plus de hauts que celle-ci, malgré qu'elle soit la même et qu'elle ait une date ultérieure. Ensuite, j'ai vu la dernière phrase et j'ai augmenté les deux réponses
llamerr
@topless que voulez-vous dire par "Vous ne pouvez pas mélanger sass et syntaxe css native" Je le fais depuis des années. Fonctionne très bien pour moi.
Shanimal
115 
.g {
    &.posted {
    }
}

vous devez ajouter "&" avant .posted

grobitto
la source
2

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

Nesha Zoric
la source