How to Create a Placeholder Mixin in SCSS/CSS Using @content and @at-root?

Placeholder Mixin in SCSS/CSS

You're facing an issue creating a placeholder mixin in Sass due to the presence of colons and semicolons in the CSS properties passed into the mixin.

To overcome this challenge, utilize the @content directive in your mixin:

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

You can now include the mixin as follows:

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

Additionally, Sass 3.4 introduces the @at-root directive, enabling you to write your mixin in a way that works in both nested and unnested contexts:

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

By using @at-root in conjunction with @content, you ensure your mixin works correctly in all scenarios.

The above is the detailed content of How to Create a Placeholder Mixin in SCSS/CSS Using @content and @at-root?. For more information, please follow other related articles on the PHP Chinese website!