Les variables SCSS peuvent-elles être utilisées directement dans les sélecteurs CSS ?

Syntaxe du sélecteur dynamique dans SCSS

Les variables offrent un moyen pratique de paramétrer les feuilles de style CSS, permettant un code hautement dynamique et réutilisable. Cependant, la question se pose : les variables peuvent-elles être exploitées dans les sélecteurs CSS ?

L'exemple fourni présente une tentative d'utilisation d'une variable, $gutter, dans un sélecteur comme suit :

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

Le la sortie souhaitée est un sélecteur de classe, .grid10, avec une couleur d’arrière-plan rouge. Cependant, cette syntaxe particulière n'est pas valide dans SCSS.

Pour obtenir la fonctionnalité souhaitée, SCSS propose une syntaxe alternative impliquant l'espace réservé #{} :

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

Dans ce cas, la variable $gutter est interpolé dans le sélecteur en utilisant la syntaxe #{}. Le résultat CSS résultant est :

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

De plus, les variables peuvent être interpolées dans des contextes de chaîne, tels que les URL :

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

Cela permet la construction dynamique d'URL et d'autres contextes basés sur des chaînes. propriétés.

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!