In this section, let's take a look at the selector function in Sass, which is used to view and process selectors.
Selector functions commonly used in Sass:
| function | describe |
|---|---|
| is-superselector() | Compare the matching ranges of the two selectors, and return true if they match; otherwise, return false |
| selector-append() | Add one (or more) selectors after the first selector |
| selector-nest() | Returns a new selector that generates a nested list from the provided list selector |
| selector-parse() | Converts the selector of a string into a selector queue |
| selector-replace() | Given a selector, replace the original with replacement and return a new selector queue. |
| selector-unify() | Combine two sets of selectors into a composite selector. If two selectors cannot be combined, null value is returned |
| simple-selectors() | Split the composite selector into a single selector |
The following is the HTML code to be used in this section:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sass study(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<div class="con">
<h3>Hello, Xiake island!</h3>
<p class="con_p"><span class="con_span">programing language</span>study</p>
<ul>
<li>Python</li>
<li>Java</li>
<li>HTML</li>
</ul>
</div>
</body>
</html>
Is superselector() function
The is superselector() function is used to compare the matching ranges of two selectors. Determine whether the first selector contains the second selector.
The syntax is as follows:
is-superselector(super, sub)
Example:
.one{
content: is-superselector("div", "div.con_p");
}
.two{
content: is-superselector("h3", "span");
}
Compile into CSS code:
.one {
content: true;
}
.two {
content: false;
}
As you can see from the output, div.con is included in the div selector_ The scope matched by the P selector, so the output result returns true. The h3 selector does not include the span selector matching range, so the output result returns false.
Selector append function
The selector append () function is used to add one or more selectors after the first selector.
Example:
For example, we will con_p selector added to After con selector:
.one{
content: selector-append(".con", ".con_p");
}
Compile into CSS code:
.one {
content: .con.con_p;
}
Selector nest() function
The selector nest() function returns a new selector that generates a nested list from the list selector provided.
Example:
.one{
content: selector-nest("ul", "li");
}
Compile into CSS code:
.one {
content: ul li;
}
Selector parse() function
The selector parse() function converts the selector of the string into a selector queue.
Example:
.one{
content: selector-nest(".con .con_p span");
}
Compile into CSS code:
.one {
content: .con .con_p span;
}
Selector replace() function
The selector replace () function gives a selector and returns a new selector queue after replacing the original with replacement.
The syntax is as follows:
selector-replace(selector, original, replacement)
Example:
.one{
content: selector-replace("div.con_span", "div", ".con");
}
Compile into CSS code:
.one {
content: .con_span.con;
}
Selector unify() function
The selector unify() function combines two sets of selectors into a composite selector. If the two selectors cannot be combined, a null value is returned.
Example:
.one{
content: selector-unify("p", ".con_span");
}
.two{
content: selector-unify("h3", "p");
}
Compile into CSS code:
.one {
content: p.con_span;
}
Simple selectors() function
The simple selectors() function splits the composite selector into a single selector.
Example:
For example, the following code:
.one{
content: simple-selectors("div.con_p");
}
.two{
content: simple-selectors("div.con_p.con_span");
}
Compile into CSS code:
.one {
content: div, .con_p;
}
.two {
content: div, .con_p, .con_span;
}
Link: https://www.9xkd.com/