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

Utilisation des variables dans les sélecteurs SCSS

Dans SCSS, exploiter les variables pour créer des sélecteurs dynamiques peut être une technique utile. Cependant, l'utilisation de variables directement dans les sélecteurs, comme dans votre exemple, n'est pas prise en charge par la syntaxe.

Pour employer efficacement des variables dans les sélecteurs, vous pouvez les utiliser comme préfixes ou suffixes dans le sélecteur lui-même. Cela vous permet de générer dynamiquement des noms de classe spécifiques. Par exemple, vous pouvez modifier votre code comme suit :

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

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

Avec cette modification, le CSS généré inclura une classe .grid10 avec la couleur de fond souhaitée :

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

De plus, vous pouvez utiliser des variables dans des chaînes pour créer dynamiquement des URL ou d'autres éléments nécessitant une interpolation de chaîne. Par exemple :

<code class="scss">$gutter: 10;
$filename: 'sans-serif';

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!