MOINS classes d'imbrication CSS

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:MOINS classes d'imbrication CSS

.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 obtenir le .g.posted de travailler. il montre juste le bit .g. Si je fais cela, il est très 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; 
     } 
    }

Je voudrais imbriquer le .posted dans .g bien. Des idées?

Source

2011-02-25 newbie_86

170

[edited RÉPONSE]

Comme je l'ai downvoted sans commentaire ni justification, je me sens obligé de réagir à ce que je me sens comme pourrait être la cause de la downvote.

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 généré ressemblera à ceci:

.class.class2 {}

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

[ORIGINAL RÉPONSE]

MOINS ne fonctionne pas de cette façon.

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

.class1 { 
    .class2 {} 
}

définit les noeuds imbriqués. .class2 ne sera appliqué que s'il s'agit d'un enfant d'un noeud avec la classe class1.

J'ai été confondu avec ceci aussi et ma conclusion est que MOINS besoin d'un mot-clé this :).

Source

2011-02-25 12:22:13 mingos

'sass' a cette fonctionnalité intégrée à l'opérateur &. – sevenseacat

awww, no. Je pensais que LESS était génial jusqu'à présent ... merci –

LESS est toujours génial, en particulier le préprocesseur PHP LESS, avec sa syntaxe modifiée, 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. – mingos

108

.g { 
    &.posted { 
    } 
}

vous devez ajouter « & » avant .posted

Source

2011-03-27 18:27:55 grobitto

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

Source

2018-02-21 08:20:42

MOINS classes d'imbrication CSS

Répondre

Questions connexes