w3.css
공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자.
선택자 함수
선택자 함수는 선택기를 확인하고 조작하는 데 사용된다.
다음 표는 Sass의 모든 선택자 함수를 나열한다.
| 기능 | 설명 | 예시 |
|---|---|---|
| is-superselector(상위 요소, 하위 요소) | 상위 요소 선택기가 하위 요소가 일치하는 모든 요소와 일치하는지 확인한다. | is-superselector(“div”, “div.myInput”) 결과: true is-superselector(“div.myInput”, “div”) 결과: false is-superselector(“div”, “div”) 결과: true |
| selector-append(선택자들) | 첫 번째 선택자에 두 번째(및 세 번째/네 번째 등) 선택자를 추가한다. | selector-append(“div”, “.myInput”) 결과: div.myInput selector-append(“.warning”, “__a”) 결과: .warning__a |
| selector-nest(선택자들) | 제공된 목록에 따라 중첩된 CSS 선택기 목록이 포함된 새 선택자를 반환한다. | selector-nest(“ul”, “li”) 결과: ul li selector-nest(“.warning”, “alert”, “div”) 결과: .warning div, alert div |
| selector-parse(선택자) | 상위 선택기와 동일한 형식을 사용하여 선택자에 포함된 문자열의 목록을 반환한다. | selector-parse(“h1 .myInput .warning”) 결과: (‘h1’ ‘.myInput’ ‘.warning’) |
| selector-replace(선택자, 원본, 대체) | 원본에 지정된 선택자 대신 대체에 지정된 선택자가 포함된 새 선택자를 반환한다. | selector-replace(“p.warning”, “p”, “div”) 결과: div.warning |
| selector-unify(선택자1, 선택자2) | 선택자1과 선택자2 모두에 일치하는 요소만 일치하는 새 선택자를 반환한다. | selector-unify(“myInput”, “.disabled”) 결과: myInput.disabled selector-unify(“p”, “h1”) 결과: null |
| simple-selectors(선택자들) | 선택자들에 있는 개별 선택자들 목록을 반환한다. | simple-selectors(“div.myInput”) 결과: div, .myInput simple-selectors(“div.myInput:before”) 결과: div, .myInput, :before |
참고
W3C School - Sass Selector Functions
Sass - Sass Basics
