Comment styliser le texte d'un espace réservé à l'aide d'un Mixin en SCSS/CSS ?

Mixin d'espace réservé dans SCSS/CSS

Défi :
Créer un mixin pour styliser le texte d'espace réservé à l'aide de statique CSS dans Sass.

Tentative de mixin :

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

Problème :
Le mixin ne fonctionne pas à cause des deux-points et des points-virgules passés via le paramètre $css, interférant avec les sélecteurs d'espace réservé spécifiques au navigateur.

Solution : Utilisation de la directive @content
Introduisez la directive @content pour inclure du CSS statique dans le mixin sans perturber le sélecteurs d'espace réservé.

<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>

Amélioration supplémentaire : utilisation imbriquée et non imbriquée (Sass 3.4)

<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>

Cela vous permet d'imbriquer le mixin d'espace réservé dans d'autres sélecteurs tout en ciblant toujours l'élément d'espace réservé.

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!