Sass selector function

Time:2022-5-29

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 to a selector queue
selector-replace() Given a selector, replace 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 learning (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\u P" > <span class= "con\u span" > programming language </span> learning</p>
            <ul>
                <li>Python</li>
                <li>Java</li>
                <li>HTML</li>
            </ul>
        </div>
    </body>
</html>

Is superselector() function

is-superselector()The function compares the ranges that two selectors match. 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 to CSS code:

.one {
  content: true;
}

.two {
  content: false;
}

As can be seen from the output results, becausedivSelector containsdiv.con_pThe range that the selector matches, so the output result returnstrue. andh3Selector does not includespanThe selector matches the range, so the output result returnsfalse

Selector append function

selector-append()The function adds one or more selectors after the first selector.

Example:

For example, we willcon_pSelector add to.conAfter selector:

.one{   
    content: selector-append(".con", ".con_p");
}

Compile to CSS code:

.one {
  content: .con.con_p;
}

Selector nest() function

selector-nest()Function returns a new selector that generates a nested list from the provided list selector.

Example:
.one{   
    content: selector-nest("ul", "li");
}

Compile to CSS code:

.one {
  content: ul li;
}

Selector parse() function

selector-parse()The selector() function converts the selector of a string to a selector queue.

Example:
.one{   
    content: selector-nest(".con .con_p span");
}

Compile to CSS code:

.one {
  content: .con .con_p span;
}

Selector replace() function

selector-replace()Function gives a selector, and returns a new selector queue after replacing original with replacement.

The syntax is as follows:

selector-replace(selector, original, replacement)
Example:
.one{   
    content: selector-replace("div.con_span", "div", ".con");
}

Compile to CSS code:

.one {
  content: .con_span.con;
}

Selector unify() function

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 to CSS code:

.one {
  content: p.con_span;
}

Simple selectors() function

simple-selectors()Function to split 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 to CSS code:

.one {
  content: div, .con_p;
}

.two {
  content: div, .con_p, .con_span;
}

Link:https://www.9xkd.com/

Recommended Today

P3120 [USACO15FEB]Cow Hopscotch G

portal ideas A simple idea is a\(O(n^2m^2)\)transfer of: \[f_{i,j}=\sum_{x=1}^{i-1}\sum_{y=1}^{j-1}f_{x,y}*[a_{i,j}!=a_{x,y}] \] There are so many constraints, thinking about using cdq divide and conquer to optimize we consider theRowdivide and conquer\([l,mid]\) Then brute force enumerationList,use\([l,mid]\)to update\((mid,r]\) enumerate columns each time\(j\)After the transfer, the\(\sum_{i=l}^{mid}f_{i,j}\)add to\(sum\), and update\(s[a_{i,j}]\)(used to subtract the contribution of the same number) The equation for […]