SCSS/CSS에서 믹스인을 사용하여 자리 표시자 텍스트의 스타일을 지정하는 방법은 무엇입니까?

SCSS/CSS의 자리 표시자 믹스

과제:
정적을 사용하여 자리 표시자 텍스트 스타일을 지정하는 믹스인 만들기 Sass 내의 CSS.

믹스인 시도:

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

문제:
콜론과 세미콜론이 전달되어 믹스인이 작동하지 않습니다. $css 매개변수를 통해 브라우저별 자리표시자 선택기를 방해합니다.

해결책: @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 3.4)

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

이를 통해 다른 선택기 내에 자리 표시자 믹스인을 중첩할 수 있습니다. 여전히 자리표시자 요소를 타겟팅하고 있습니다.

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