Je suis actuellement dans un cornichon. J'ai besoin de grouper les sélecteurs à l'intérieur d'une boucle de saut. J'ai essayé de nombreuses façons différentes de faire cela comme: p> Qu'est-ce que j'essaie d'accomplir à l'aide de PURE SASS (pas de rubis) est le suivant: P> .offset-by-1,
.offset-by-2,
.offset-by-3,
...
.offset-by-10 { foo: bar; }
3 Réponses :
Avez-vous essayé quelque chose comme ceci: mis à jour:
Droit j'ai mal interprété votre question. Mais ces règles ne seraient-elles pas les mêmes en CSS, bien qu'un peu plus de mots
Cela ne vous donne pas trop de virgule?
Gardez-le simple, soldat! upd strong> Vous pouvez également avoir des styles individuels avec cette approche: p> .offset-by-1, .offset-by-2, .offset-by-3, .offset-by-4, .offset-by-5, .offset-by-6, .offset-by-7, .offset-by-8, .offset-by-9, .offset-by-10 {
foo: bar; }
.offset-by-1 {
margin-left: 50px; }
.offset-by-2 {
margin-left: 100px; }
.offset-by-3 {
margin-left: 150px; }
.offset-by-4 {
margin-left: 200px; }
.offset-by-5 {
margin-left: 250px; }
.offset-by-6 {
margin-left: 300px; }
.offset-by-7 {
margin-left: 350px; }
.offset-by-8 {
margin-left: 400px; }
.offset-by-9 {
margin-left: 450px; }
.offset-by-10 {
margin-left: 500px; }
Ohh, j'aime ça mieux. Je ressentirais des porcs en sélectionnant cela comme la meilleure réponse après que j'ai déjà choisi. J'aime mieux cette méthode car il est plus simple et plus facile à comprendre!
Pourquoi pas? Ma réponse n'encourage pas les débutants à surcharger des choses et à utiliser des outils inappropriés (mélanges comme s'étend). De plus, j'ai ajouté quelque chose que vous pourriez aimer ma réponse, s'il vous plaît jeter un oeil.
Certainement meilleur choix. N'aurait jamais pensé à cela.
Meilleure solution! J'aime ça!
Ceci est probablement excessivé pour ce dont vous avez besoin, mais j'avais besoin de pouvoir ajouter : dernier enfant code> sur la liste des classes. J'ai construit cela sur Réponse de Clark Pan : .e > .g-1:first-child,
.e > .g-2:first-child,
.e > .g-3:first-child {
margin:0!important;
}