Миксин-заполнитель в SCSS/CSS

Вы столкнулись с проблемой при создании миксина-заполнителя в Sass из-за наличия двоеточий и точек с запятой в свойствах CSS, передаваемых в миксин.

Чтобы решить эту проблему, используйте директиву @content в своем миксине:

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

Кроме того, в Sass 3.4 появилась директива @at-root, позволяющая писать миксин таким образом, чтобы он работал как во вложенном, так и во невложенном контекстах:

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

Используя @at-root в сочетании с @content, вы гарантируете правильную работу вашего миксина во всех сценариях.