SASS | Selector Functions
The selector functions help in checking and changing the CSS selectors in the style-sheet. All of the functions except selector-nest() prevents the use of the parent selector.
- selector-nest($selectors…): This method returns a new selector containing a nested list of CSS selectors based on the list given.
- Example:
selector-nest(
".warning"
,
"alert"
,
"div"
)
- Output:
.warning div, alert div
- Example:
- selector-parse($selector): This method returns a list of strings contained in “selector” using the same format as the parent selector.
- Example:
selector-parse(
"h1 .myInput .warning"
)
- Output:
('h1' '.myInput' '.warning')
- Example:
- selector-unify($selector1, $selector2): This method returns a new selector that matches only elements matched by both selector1 and selector2.
- Example 1:
selector-unify(
"myInput"
,
".disabled"
)
- Output:
myInput.disabled
- Example 2:
selector-unify(
"p"
,
"h1"
)
- Output:
NULL
- Example 1:
- simple-selectors($selector): This method returns a list of the individual selectors present in “selector”, which should be a compound selector.
- Example:
simple-selectors(
"div.myInput"
)
- Output:
div, .myInput
- Example:
- is-superselector($super, $sub): This method returns a Boolean value telling whether the selector given in “super” matches all the elements given in “sub”.
- Example 1:
is-superselector(
"div"
,
"div.myInput"
)
- Output:
true
- Example 2:
is-superselector(
"div.myInput"
,
"div"
)
- Output:
false
- Example 1:
- selector-replace($selector, $original, $replacement): This method returns a new selector with the selector given in “replacement” in place of selector given in “original”.
- Example:
selector-replace(
"p.hello"
,
"p"
,
"q"
)
- Output:
q.hello
- Example:
- selector-append($selectors): This method returns a new selector with the second and next selectors appended to the first without any spaces.
- Example 1:
selector-append(
"div"
,
".myInput"
)
- Output:
div.myInput
- Example 2:
selector-append(
".warning"
,
"__a"
)
- Output:
warning__a
- Example 1:
- selector-extend($selector, $extendee, $extender): This method extends the $selector as @extend rule. It returns a copy of $selector modified with the following @extend rule:
#{$extender} { @extend #{$extendee}; }