YouTip LogoYouTip

Sass Selector Func

# Sass Selector Functions [![Image 3: Sass Functions](#) Sass Functions](#) Sass selector functions are used to inspect and manipulate selectors. The following table lists the selector functions in Sass: | Function | Description & Examples | | --- | --- | | is-superselector(_super_, _sub_) | Compares the matching range of two selectors, i.e., determines whether the _super_ selector contains the range matched by the _sub_ selector. Returns true if yes, otherwise returns false. **Example:** is-superselector("div", "div.myInput") Result: true is-superselector("div.myInput", "div") Result: false is-superselector("div", "div") Result: true | | selector-append(_selectors_) | Appends the second (or multiple) selector(s) to the end of the first selector. **Example:** selector-append("div", ".myInput") Result: div.myInput selector-append(".warning", "__a") Result: .warning__a | | selector-extend(_selector_, _extendee_, _extender_) | | | selector-nest(_selectors_) | Returns a new selector that creates a nested list from the provided list of selectors. **Example:** selector-nest("ul", "li") Result: ul li selector-nest(".warning", "alert", "div") Result: .warning div, alert div | | selector-parse(_selector_) | Converts a string selector _selector_ into a selector list. **Example:**selector-parse("h1 .myInput .warning") Result: ('h1' '.myInput' '.warning') | | selector-replace(_selector_, _original_, _replacement_) | Given a selector, replaces original with replacement and returns a new selector list. **Example:** selector-replace("p.warning", "p", "div") Result: div.warning | | selector-unify(_selector1_, _selector2_) | Combines two groups of selectors into a compound selector. Returns null if the two selectors cannot be unified. **Example:** selector-unify("myInput", ".disabled") Result: myInput.disabled selector-unify("p", "h1") Result: null | | simple-selectors(_selectors_) | Splits a compound selector into individual selectors. **Example:** simple-selectors("div.myInput") Result: div, .myInput simple-selectors("div.myInput:before") Result: div, .myInput, :before | * * Sass Functions](#)
← Sass Color FuncSass List Func β†’