Maison > interface Web > tutoriel CSS > Comment utiliser les propriétés CSS comme valeurs SASS Mixin : un guide d'interpolation de chaînes

Comment utiliser les propriétés CSS comme valeurs SASS Mixin : un guide d'interpolation de chaînes

Patricia Arquette
Libérer: 2024-10-27 14:57:29
original
287 Les gens l'ont consulté

How to Use CSS Properties as SASS Mixin Values: A Guide to String Interpolation

Utilisation des propriétés CSS comme valeurs de mixage SASS

En essayant de créer un mixin de marge/rembourrage polyvalent, vous avez rencontré un problème dans SASS. Examinons le problème que vous avez décrit et trouvons une solution ensemble.

Définition des propriétés CSS dans les mixins

Votre code tente de définir les propriétés CSS (marge et remplissage) dans les valeurs du mixin SASS. Cependant, il existe un problème clé : les propriétés CSS ne peuvent pas être utilisées directement comme valeurs de mixage. Au lieu de cela, vous devez utiliser une technique appelée « interpolation de chaîne » pour inclure des variables en tant que noms de propriété.

Utilisation de l'interpolation de chaîne

L'interpolation de chaîne vous permet d'insérer des valeurs de variable dans des chaînes à l'aide du #{$ syntaxe variable}. Cela vous aide à définir les propriétés CSS de manière dynamique en fonction des variables dans les mixins.

Voici comment modifier votre code pour utiliser l'interpolation de chaîne :

<code class="sass">[class*="shift"] {
  $sft-o: 10px;

  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }

  &[class*="_m"]{
    @include shift_stp(margin);
  }

  &[class*="_p"]{
    @include shift_stp(padding);
  }
}</code>
Copier après la connexion

Remarque sur les sélecteurs d'attributs

Il est important de noter que le sélecteur d'attribut que vous utilisez (*="_m") fera également correspondre les éléments avec "_mid" dans leurs noms de classe. Ce n'est peut-être pas le comportement que vous souhaitiez, alors pensez à réviser votre sélecteur d'attribut en conséquence.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal