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:

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

You can now include the mixin as follows:

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

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:

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

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