SCSS/CSS의 자리 표시자 믹스인

전달된 CSS 속성에 콜론과 세미콜론이 있기 때문에 Sass에서 자리 표시자 믹스인을 생성하는 데 문제가 있습니다. mixin.

이 문제를 극복하려면 mixin:

@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와 함께 사용하면 믹스인이 모든 시나리오에서 올바르게 작동하도록 보장할 수 있습니다.