Comment puis-je utiliser des variables dans les sélecteurs CSS avec SCSS ?

Utilisation de variables pour les sélecteurs CSS dans SCSS

Dans SCSS, les variables sont un outil puissant pour stocker des valeurs dynamiques et les réutiliser dans votre feuille de style. Cependant, utiliser des variables directement dans les sélecteurs CSS n'est pas simple.

Supposons que vous ayez une variable $gutter définie sur 10. Vous souhaiterez peut-être l'utiliser dans un sélecteur pour générer dynamiquement un nom de classe basé sur la valeur de $ gouttière.

Problème :

Si vous essayez d'utiliser directement une variable dans un sélecteur, comme ceci :

<code class="scss">.grid+$gutter {
    background: red;
}</code>

Cela entraînera une classe CSS invalide. La sortie ne sera pas .grid10, comme prévu.

Solution :

Pour utiliser des variables dans les sélecteurs CSS, vous devez utiliser le #{$var-name} syntaxe. Le code ci-dessous montre comment utiliser la variable $gutter pour générer un nom de classe :

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

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

Cela générera le CSS suivant :

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

Notez que le # est requis avant le nom de la variable.

Remarque supplémentaire :

La syntaxe #{$var-name} peut également être utilisée pour inclure des variables dans des chaînes, comme dans les URL :

<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff')</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!