Comment créer un mixin d'espace réservé dans SCSS/CSS qui fonctionne avec les deux-points et les points-virgules ?

Placeholder Mixin dans SCSS/CSS

Vous cherchez à créer un mixin pour les espaces réservés dans Sass. Le mixin que vous avez conçu rencontre des problèmes dus à l'inclusion de deux-points et de points-virgules dans le CSS fourni.

Heureusement, Sass propose une solution via la directive @content. En employant @content dans votre mixin, vous pouvez transmettre directement du CSS statique, comme démontré ci-dessous :

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

Pour plus de détails, reportez-vous à la référence Sass à l'adresse :
http://sass-lang. com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Sass 3.4 et au-delà

Dans Sass 3.4 et versions ultérieures, vous pouvez utiliser le @optional- mixin à la racine pour garantir la fonctionnalité dans les scénarios imbriqués et non imbriqués :

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $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;
  }
}

Utilisation et sortie

.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}

Cela affichera :

.foo::-webkit-input-placeholder {
  color: green;
}
.foo:-moz-placeholder {
  color: green;
}
.foo::-moz-placeholder {
  color: green;
}
.foo:-ms-input-placeholder {
  color: green;
}

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}

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!