Comment créer un mixin SASS pour les espaces réservés qui gère le CSS statique sans erreurs ?

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

Question :
Comment créer un mixin pour les espaces réservés dans SASS qui permet la transmission de CSS statique sans erreurs de syntaxe ?

Réponse :
Pour obtenir une transmission transparente de CSS statique dans un mixin d'espace réservé, nous pouvons utiliser la directive @content.

Mixin mis à jour :

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

Utilisation :

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

Mixin avancé (Sass 3.4 et supérieur) :

Pour une flexibilité accrue, vous pouvez utiliser le mixin suivant pour prendre en charge les utilisations imbriquées et non imbriquées :

<code class="scss">@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>

Ce mixin fournit une approche d'espace réservé plus robuste qui fonctionne sur divers CSS sélecteurs et éléments imbriqué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!