@content 및 @at-root를 사용하여 SCSS/CSS에서 자리 표시자 믹스인을 만드는 방법은 무엇입니까?

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

전달된 CSS 속성에 콜론과 세미콜론이 있기 때문에 Sass에서 자리 표시자 믹스인을 만드는 문제에 직면하고 있습니다.

이 문제를 극복하려면 믹스인에서 @content 지시문을 활용하세요.

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

이제 다음과 같이 믹스인을 포함할 수 있습니다.

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

또한 Sass 3.4에는 @at-root 지시어가 도입되어 중첩 및 중첩되지 않은 컨텍스트 모두에서 작동하는 방식으로 믹스인을 작성할 수 있습니다.

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

@content와 함께 @at-root 사용 , 모든 시나리오에서 믹스인이 올바르게 작동하는지 확인하세요.

위 내용은 @content 및 @at-root를 사용하여 SCSS/CSS에서 자리 표시자 믹스인을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!