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

Placeholder Mixin in SCSS/CSS

You are seeking to create a mixin for placeholders in Sass. The mixin you designed encounters issues due to the inclusion of colons and semicolons in the provided CSS.

Fortunately, Sass provides a solution through the @content directive. By employing @content in your mixin, you can pass static CSS directly, as demonstrated below:

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

For more details, refer to the Sass Reference at:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Sass 3.4 and Beyond

In Sass 3.4 and later, you can utilize the @optional-at-root mixin to ensure functionality in both nested and unnested scenarios:

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

Usage and Output

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

@include placeholder {
  color: red;
}

This will output:

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

The above is the detailed content of How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?. For more information, please follow other related articles on the PHP Chinese website!