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

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

Susan Sarandon

Libérer： 2024-10-26 13:34:30

original

1024 Les gens l'ont consulté

How to Style Placeholder Text using a Mixin in 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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!