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

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

DDD

Libérer： 2024-10-27 04:02:02

original

743 Les gens l'ont consulté

How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?

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

Copier après la connexion

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

Copier après la connexion

Utilisation et sortie

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

@include placeholder {
  color: red;
}

Copier après la connexion

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

Copier après la connexion

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!