콜론과 세미콜론과 함께 작동하는 SCSS/CSS에서 자리표시자 믹스인을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

콜론과 세미콜론과 함께 작동하는 SCSS/CSS에서 자리표시자 믹스인을 만드는 방법은 무엇입니까?

DDD

풀어 주다： 2024-10-27 04:02:02

원래의

742명이 탐색했습니다.

How to Create a Placeholder Mixin in SCSS/CSS that Works With Colons and Semicolons?

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

Sass에서 자리 표시자용 믹스인을 만들려고 합니다. 귀하가 디자인한 믹스인은 제공된 CSS에 콜론과 세미콜론이 포함되어 있어 문제가 발생합니다.

다행히 Sass는 @content 지시문을 통해 솔루션을 제공합니다. 믹스인에 @content를 사용하면 아래와 같이 정적 CSS를 직접 전달할 수 있습니다.

@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;
}

로그인 후 복사

자세한 내용은 Sass Reference(
http://sass-lang)를 참조하세요. com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

Sass 3.4 이상

Sass 3.4 이상에서는 @선택 사항을 활용할 수 있습니다. 중첩 및 중첩되지 않은 시나리오 모두에서 기능을 보장하기 위한 루트 믹스인:

@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;
  }
}

로그인 후 복사

사용 및 출력

.foo {
  @include placeholder {
    color: green;
  }
}

@include placeholder {
  color: red;
}

로그인 후 복사

이 결과는 다음과 같습니다.

.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;
}

로그인 후 복사

위 내용은 콜론과 세미콜론과 함께 작동하는 SCSS/CSS에서 자리표시자 믹스인을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!