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 :

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

Vous pouvez désormais inclure le mixin comme suit :

@include placeholder {
    font-style: italic;
    color: white;
    font-weight: 100;
}

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 :

@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;
  }
}

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