댓글 목록

Sass Selector 함수

페이지 정보

작성자 운영자 작성일 19-06-04 14:15 조회 1,301 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

Sass Selector 함수 


Selector 함수는 선택기를 확인하고 조작하는 데 사용됩니다.


다음 표에서는 Sass의 모든 Selector 함수를 나열합니다.

 Function

 Description & Example

 is-superselector(super, sub)

슈퍼 선택기가 하위 일치하는 모든 요소와 일치하는지 여부를 확인합니다.


예:

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

결과 : true 

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

결과 : false 

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

결과 : true 

 selector-append(selectors)

두 번째 (세 번째 / 네 번째 등) 선택기를 첫 번째 선택기에 추가합니다.


예:

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

결과 : div.myInput 

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

결과 : .warning__a 

 selector-extend(selector, extendee, extender)


 selector-nest(selectors)

제공된 목록을 기반으로 CSS 선택기의 중첩 목록을 포함하는 새 선택기를 반환합니다.


예:

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

결과 : ul li 

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

결과 : .warning div, alert div 

 selector-parse(selector)

부모 선택기와 같은 형식을 사용하여 selector에 포함 된 문자열 목록을 반환합니다.


예:

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

결과 : ('h1' '.myInput' '.warning')

 selector-replace(selector, original, replacement)

original로 지정된 셀렉터 대신에 치환으로 지정된 셀렉터를 가지는 새로운 셀렉터를 돌려줍니다.


예:

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

결과 : div.warning

 selector-unify(selector1, selector2)

selector1과 selector2가 일치하는 요소와 일치하는 새 selector를 반환합니다.


예:

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

결과 : myInput.disabled 

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

결과 : null 

 simple-selectors(selectors)

선택자의 개별 선택자 목록을 반환합니다.


예:

simple-selectors("div.myInput") 

결과 : div, .myInput 

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

결과 : div, .myInput, :before 





댓글목록 0

등록된 댓글이 없습니다.