Comment pouvez-vous utiliser des variables dans les sélecteurs dans SCSS ?

Interpolation de variables dans les sélecteurs

Dans SCSS, les variables stockent des valeurs qui peuvent être référencées dans toute la feuille de style. Cependant, utiliser des variables directement comme sélecteurs pose certaines limites. Explorons ce scénario et trouvons une solution.

Le défi : utiliser des variables dans les sélecteurs

Vous avez une variable $gutter définie sur 10 et souhaitez l'utiliser dans un sélecteur .grid $gutter. Ce code tente de créer une classe .grid10 avec un fond rouge. Cependant, la compilation ne parvient pas.

Solution : Interpolation avec #{$}

Pour utiliser des variables dans les sélecteurs, nous devons utiliser l'interpolation en utilisant le #{$} syntaxe. Voici comment :

<code class="scss">$gutter: 10;

.grid#{$gutter} {
    background: red;
}</code>

En enfermant la variable $gutter dans #{$}, nous interpolons sa valeur dans la chaîne de sélection, ce qui donne .grid10. Cela générera le CSS souhaité :

<code class="css">.grid10 {
    background: red;
}</code>

Lorsqu'elle est utilisée dans une chaîne, par exemple pour une URL, l'interpolation fonctionne de la même manière :

<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff');</code>

Remarques supplémentaires :

• L'interpolation ne peut être utilisée que dans certains contextes au sein d'un sélecteur, comme après les noms de classe ou d'ID.
• Si vous avez besoin de scénarios de sélecteur dynamique plus complexes, envisagez d'utiliser des mixins pour la réutilisabilité du code. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!