Sass combine les parents en utilisant l'esperluette (&) avec les sélecteurs de type

Question

J'ai des problèmes avec l'imbrication dans Sass. Disons que j'ai le code HTML suivant :

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

Lorsque j'essaie d'imbriquer mes styles dans ce qui suit, j'obtiens une erreur de compilation :

.item {
    color: black;
    a& {
        color:blue;
   }
}

Comment référencer un sélecteur de type avant le sélecteur parent lorsqu'il fait partie du même élément ?

Answer 1

Comme le souligne Kumar Cela est possible depuis que Sass 3.3.0.rc.1 (Maptastic Maple) .

La directive @at-Root fait en sorte qu'une ou plusieurs règles soient émises à la racine du document, plutôt que d'être imbriquées sous leurs sélecteurs parents.

Nous pouvons combiner les @at-root directive ainsi que interpolation #{} pour arriver au résultat escompté.

SASS

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

Sortie CSS

.item {
    color: black;
}
a.item {
    color: blue;
}

Answer 2

El @at-root -ne résoudra pas le problème si vous avez l'intention d'étendre le sélecteur le plus proche vers le haut de la chaîne. A titre d'exemple :

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

Se compile en :

div#id > .element {
    color: blue;
}

---

Et si vous deviez joindre votre étiquette à .element au lieu de #id ?

Il y a une fonction dans Sass appelée selector-unify() qui résout ce problème. En utilisant ceci avec @at-root il est possible de cibler .element .

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

Se compile en :

#id > div.element {
    color: blue;
}

Answer 3

Pour commencer, (au moment de la rédaction de cette réponse) il n'existe pas de syntaxe sass qui utilise Sélecteur . Si vous deviez faire quelque chose comme ça, vous auriez besoin d'un espace entre le sélecteur et l'esperluette. Par exemple :

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

L'autre façon d'utiliser l'esperluette est probablement celle que vous recherchez (à tort) :

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Cela vous permet d'étendre les sélecteurs avec d'autres classes, ID, pseudo-sélecteurs, etc. Malheureusement, dans votre cas, cela donnerait théoriquement quelque chose comme .itema, qui ne fonctionne évidemment pas.

Vous devriez peut-être revoir la façon dont vous écrivez votre CSS. Y a-t-il un élément parent que vous pourriez utiliser ?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

Ainsi, vous pourrez facilement écrire votre SASS de la manière suivante :

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(Note annexe : tu devrais jeter un coup d'oeil à ton html. Tu mélanges les guillemets simples et doubles ET tu mets des attributs href sur les balises p).

Answer 4

AFAIK Dans le cas où vous voulez combiner l'esperluette pour la classe et les balises en même temps, vous devez utiliser cette syntaxe :

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

sera compilé en

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

D'autres utilisations (comme l'utilisation de la classe avant @at-root ou en utilisant plusieurs @at-root ) entraîneront des erreurs.

J'espère que cela sera utile

Answer 5

Cette fonctionnalité a été intégrée à la dernière version de Sass, 3.3.0.rc.1(Maptastic Maple)

Les deux fonctions étroitement liées que vous devrez utiliser sont le scriptable & que vous pouvez interpoler à l'intérieur d'un style imbriqué pour faire référence à des éléments parents, et la balise @at-root qui place le sélecteur ou le bloc de css suivant immédiatement à la racine (il n'aura pas de parents dans la css produite).

Voir ceci Numéro Github pour plus de détails