Comment créer un mixin d'espace réservé dans SCSS/CSS à l'aide de @content et @at-root ?

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

Vous êtes confronté à un problème lors de la création d'un mixin d'espace réservé dans Sass en raison de la présence de deux-points et de points-virgules dans les propriétés CSS transmises le mixin.

Pour surmonter ce défi, utilisez la directive @content dans votre mixin :

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

Vous pouvez maintenant inclure le mixin comme suit :

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

De plus, Sass 3.4 introduit la directive @at-root, vous permettant d'écrire votre mixin d'une manière qui fonctionne à la fois dans des contextes imbriqués et non imbriqués :

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

En utilisant @at-root en conjonction avec @content , vous vous assurez que votre mixin fonctionne correctement dans tous les scénarios.

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!