Comment puis-je utiliser les propriétés CSS comme valeurs SASS Mixin ?

Propriété CSS en tant que valeur de mixage SASS

Lors de la création de mixins de marge/remplissage universels dans SASS, vous pouvez rencontrer un problème concernant la définition des propriétés CSS comme valeurs de mixage. L'extrait de code fourni est une tentative d'accomplir cette tâche. Cependant, certaines modifications sont nécessaires pour le rendre pleinement fonctionnel.

Solution :

La clé pour résoudre ce problème réside dans l'interpolation de chaîne. En utilisant la notation #{$var}, on peut utiliser des variables comme noms de propriétés.

Code corrigé :

[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);
  }
}

DEMO :

Cette correction garantit que la propriété CSS (marge ou remplissage) peut être définie dynamiquement en fonction du paramètre du mixin.

Remarque :

Pour le sélecteurs d'attributs ...*="_m", il convient de considérer que ce sélecteur s'appliquera à tous les éléments contenant "_m" dans leur nom de classe, y compris ceux avec "_mid" également. Ainsi, cela peut nécessiter une réévaluation et un ajustement pour atteindre la spécificité souhaitée.

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!