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 중국어 웹사이트의 기타 관련 기사를 참조하세요!