오류 없이 정적 CSS를 처리하는 자리 표시자용 SASS 믹스인을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

오류 없이 정적 CSS를 처리하는 자리 표시자용 SASS 믹스인을 만드는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-26 14:12:31

원래의

387명이 탐색했습니다.

How to create a SASS mixin for placeholders that handles static CSS without errors?

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

질문:
SASS에서 자리 표시자용 믹스인을 만드는 방법 구문 오류 없이 정적 CSS를 전달할 수 있는 방법은 무엇입니까?

답변:
자리 표시자 믹스인에서 정적 CSS를 원활하게 전달하려면 @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 이상) :

유연성 향상을 위해 다음 믹스인을 사용하여 중첩 및 중첩되지 않은 사용을 모두 지원할 수 있습니다.

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

로그인 후 복사

이 믹스인은 다양한 CSS에서 작동하는 보다 강력한 자리 표시자 접근 방식을 제공합니다. 선택자와 중첩 요소.

위 내용은 오류 없이 정적 CSS를 처리하는 자리 표시자용 SASS 믹스인을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!