Comment puis-je créer un mixin d'espace réservé efficace dans SCSS/CSS qui gère les sélecteurs imbriqués et non imbriqués ?

Mélange d'espaces réservés dans SCSS/CSS

Lors de la création d'un mixin SASS pour les espaces réservés, un simple mixin comme celui ci-dessous peut ne pas suffire en raison de le nombre de deux-points et de points-virgules qui lui sont transmis :

<code class="scss">@mixin placeholder ($css) {
  ::-webkit-input-placeholder {$css}
  :-moz-placeholder           {$css}
  ::-moz-placeholder          {$css}
  :-ms-input-placeholder      {$css}  
}</code>

Utiliser la directive @content

Pour transmettre du CSS statique à un mixin exactement comme souhaité, la directive @content peut être utilisée. Voici un exemple :

<code class="scss">@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

@include placeholder {
    font-style:italic;
    color: white;
    font-weight:100;
}</code>

Plus d'informations peuvent être trouvées dans la référence SASS à l'adresse https://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content.

Mixin @-root facultatif (Sass 3.4 et supérieur)

Dans Sass 3.4 et supérieur, le mixin facultatif à la racine peut être utilisé pour gérer efficacement les sélecteurs imbriqués et non imbriqués :

<code class="scss">@mixin optional-at-root($sel) {
  @at-root #{if(not &amp;, $sel, selector-append(&amp;, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}</code>

Utilisation :

<code class="scss">.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}</code>

Sortie :

<code class="css">.foo::-webkit-input-placeholder {
  color: green;
}
.foo:-moz-placeholder {
  color: green;
}
.foo::-moz-placeholder {
  color: green;
}
.foo:-ms-input-placeholder {
  color: green;
}

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}</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!