중첩된 선택기와 중첩되지 않은 선택기를 처리하는 SCSS/CSS에서 효율적인 자리 표시자 믹스인을 어떻게 만들 수 있나요?

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

자리 표시자를 위한 SASS 믹스인을 생성할 때 아래와 같은 간단한 믹스인으로는 충분하지 않을 수 있습니다. 전달되는 콜론과 세미콜론의 수:

<code class="scss">@mixin placeholder ($css) {
  ::-webkit-input-placeholder {$css}
  :-moz-placeholder           {$css}
  ::-moz-placeholder          {$css}
  :-ms-input-placeholder      {$css}  
}</code>

@content 지시문 사용

정적 CSS를 다음과 같이 정확하게 믹스인에 전달하려면 원하는 경우 @content 지시문을 사용할 수 있습니다. 예는 다음과 같습니다.

<code class="scss">@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;
}</code>

자세한 내용은 SASS 참조(https://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content)에서 확인할 수 있습니다.

선택적 @-root 믹스인(Sass 3.4 이상)

Sass 3.4 이상에서는 선택적 루트 믹스인을 사용하여 중첩 및 중첩되지 않은 선택기를 효과적으로 처리할 수 있습니다.

<code class="scss">@mixin optional-at-root($sel) {
  @at-root #{if(not &amp;, $sel, selector-append(&amp;, $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;
  }
}</code>

사용:

<code class="scss">.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}</code>

출력:

<code class="css">.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;
}</code>

위 내용은 중첩된 선택기와 중첩되지 않은 선택기를 처리하는 SCSS/CSS에서 효율적인 자리 표시자 믹스인을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!