selection()
선택 영역(Selection) 믹스인
용도
선택 영역(::selection) 스타일을 설정하는 믹스인입니다.
사용법
selection()
믹스인을 실행하고, 스타일 콘텐츠를 중괄호 안에 입력합니다.
selection($selector:string) { @content; }
@include selection() {
color: get-color(white);
background-color: get-color(black);
}
@include selection('img, button') {
color: get-color(black);
background-color: transparent;
}
매개변수(parameter)
유형(type)
필수(required)
기본 값(default)
$selector
string
null
위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.
::-moz-selection {
color: #fefefe;
background-color: #010101;
}
::selection {
color: #fefefe;
background-color: #010101;
}
img::-moz-selection {
color: #010101;
background-color: transparent;
}
img::selection {
color: #010101;
background-color: transparent;
}
button::-moz-selection {
color: #010101;
background-color: transparent;
}
button::selection {
color: #010101;
background-color: transparent;
}
로직
selection()
믹스인은 다음의 로직에 의해 작성되었습니다.
@mixin selection($selector: null) {
@if $selector == null {
::-moz-selection {
@content;
}
::selection {
@content;
}
} @else {
@each $selector in str-split($selector, ',') {
#{$selector}::-moz-selection {
@content;
}
#{$selector}::selection {
@content;
}
}
}
}
전달 받은 값이 없을 경우, 모든 요소에
::selection
스타일 설정외부로부터 전달 받은 콘텐츠(
@content
) 코드 출력전달 받은 값이 있을 경우, 선택자 문자 값을 구분 기호로 나눠 리스트로 처리
리스트를 순환하여 개별 선택자에
::selection
스타일 설정외부로부터 전달 받은 콘텐츠(@content) 코드 출력
참고
믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.
믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.
Last updated
Was this helpful?