[func] SCSS - Selector Functions (선택자 함수) 종류

목차

1. is-superselector() 함수 - super/sub 대응여부
2. selector-append() 함수 - 선택자 추가
3. selector-extend() 함수 - 선택자 확장
4. selector-nest() 함수 - 선택자 안긴 형태
5. selector-parse() 함수 - 선택자에 포함된 문자열 반환
6. selector-replace() 함수 - 선택자 부분 교체
7. selector-unify() 함수 - 두 선택자에 모두 대응하는 선택자
8. simple-selectors() 함수 - 선택자 구성하는 개별 선택자

SCSS - Selector Functions (선택자 함수) 종류

is-superselector() 함수 - super/sub 대응여부

 

is-superselector(super, sub)

super 선택자가 sub 선택자의 지시 요소와 모두 대응하는지 체크.

(예제)

is-superselector("div", "div.myInput")

Result: true

is-superselector("div.myInput", "div")

Result: false

is-superselector("div", "div")

Result: true

---

selector-append() 함수 - 선택자 추가

 

selector-append(selector1, selector2, selector3, ...)

selector1에 selector2 이하 선택자를 추가. 

(예제)

selector-append("div", ".hzInput")

Result: div.hzInput

selector-append(".warning", "__a")

Result: .warning__a

 

---

selector-extend() 함수 - 선택자 확장

 

selector-extend(selector, extendee, extender)

아래 확장규칙 적용해, 선택자를 확장.

#{$extender} {

  @extend #{$extendee};

}

(예제)

selector.extend("a.disabled", "a", ".link"); 

// a.disabled, .link.disabled

selector.extend("a.disabled", "h1", "h2"); 

// a.disabled

selector.extend(".guide .info", ".info", ".content nav.sidebar");

// .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar

 

---

selector-nest() 함수 - 선택자 안긴 형태

 

selector-nest(selector1, selector2, selector3, ...)

제공된 리스트에 기반해 CSS 선택자를 안긴 리스트 포함하는 새 선택자 반환.

(예제)

selector-nest("ul", "li")

Result: ul li

selector-nest(".warning", "alert", "div")

Result: .warning div, alert div

 

---

selector-parse() 함수 - 선택자에 포함된 문자열 반환

 

selector-parse(selector)

부모 선택자와 동일 포맷 사용해 선택자에 포함된 문자열 목록 반환.

(예제)

selector-parse("h1 .hzInput .warning")

Result: ('h1' '.hzInput' '.warning')

 

---

selector-replace() 함수 - 선택자 부분 교체

 

selector-replace(selector, original, replacement)

선택자의 original 부분을 replacement로 교체.

(예제)

selector-replace("p.warning", "p", "div")

Result: div.warning

 

---

selector-unify() 함수 - 두 선택자에 모두 대응하는 선택자

 

selector-unify(selector1, selector2)

두 선택자 모두에 대응하는 요소만 가리키는 선택자를 반환.

만족하는 요소가 존재 않는 경우엔 null 반환.

(예제)

selector-unify("myInput", ".disabled")

Result: myInput.disabled

selector-unify("p", "h1")

Result: null

 

---

simple-selectors() 함수 - 선택자 구성하는 개별 선택자

 

simple-selectors(selectors)

선택자를 구성하는 개별 선택자 리스트를 반환.

(예제)

simple-selectors("div.myInput")

Result: div, .myInput

simple-selectors("div.myInput:before")

Result: div, .myInput, :before

 

PS.

SASS selector 함수

https://sass-lang.com/documentation/modules/selector