Interpolation #{$var}

Définition

Syntaxe #{} qui insère la valeur d'une variable dans un sélecteur, un nom de propriété, ou une chaîne. Nécessaire la ou Sass n'attend pas une expression.

Analogie

Un trou dans un texte a trous : tu inseres dynamiquement le mot qui manque.

Exemple de code

$side: 'left';
$component: 'card';

.#{$component} {
  margin-#{$side}: 1rem;
  background: url('/img/#{$component}.png');
}

Cas d'usage

Générer dynamiquement des sélecteurs ou propriétés dans des boucles et des mixins.

Termes liés