> 웹 프론트엔드 > CSS 튜토리얼 > SCSS/CSS에서 믹스인을 사용하여 자리 표시자 텍스트의 스타일을 지정하는 방법은 무엇입니까?

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

Susan Sarandon
풀어 주다: 2024-10-26 13:34:30
원래의
1023명이 탐색했습니다.

How to Style Placeholder Text using a Mixin in 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 &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>
로그인 후 복사

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿