• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

1,244  

 

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(selector1, selector2, selector3, ...)

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

(예제)

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

Result: div.hzInput

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

Result: .warning__a

 


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(selector1, selector2, selector3, ...)

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

(예제)

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

Result: ul li

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

Result: .warning div, alert div

 


selector-parse(selector)

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

(예제)

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

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

 


selector-replace(selector, original, replacement)

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

(예제)

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

Result: div.warning

 


selector-unify(selector1, selector2)

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

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

(예제)

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

Result: myInput.disabled

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

Result: null

 


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

 


분류 제목
basic SASS - Home (입문)
basic SASS - Intro (소개)・Comments (주석)
basic SASS - Installation (설치)
basic SASS - Variables (변수)
basic SASS - Nesting (안긴 형태)
basic SASS - @import (가져오기)
basic SASS - @mixin (믹스인)・@include (인클루드)
basic SASS - @extend (상속・확장)
func SASS - String Functions (문자열 함수) 종류
func SASS - Numeric Functions (숫자 함수) 종류
func SASS - List Functions (리스트 함수) 종류
func SASS - Map Functions (맵 함수) 종류
func SASS - Selector Functions (선택자 함수) 종류
func SASS - Introspection Functions (내부검사 함수) 종류
func SASS - Color Functions (색상/색깔 함수) 종류
목록
찾아주셔서 감사합니다. Since 2012