Sass 选择器函数

本节我们来看一下 Sass 中的选择器函数，选择器函数用于查看与处理选择器。

Sass 中常用的选择器函数：

函数	描述
is-superselector()	比较两个选择器匹配的范围，匹配则返回 true，否则返回 false
selector-append()	将一个（或多个）选择器添加到第一个选择器的后面
selector-nest()	返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表
selector-parse()	将字符串的选择符 selector 转换成选择器队列
selector-replace()	给定一个选择器，用 replacement 替换 original 后返回一个新的选择器队列。
selector-unify()	将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 null 值
simple-selectors()	将合成选择器拆为单个选择器

下面是本节要用到的 html 代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sass学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div class="con">
            <h3>你好，侠课岛！</h3>
            <p class="con_p"><span class="con_span">编程语言</span>学习</p>
            <ul>
                <li>Python</li>
                <li>Java</li>
                <li>HTML</li>
            </ul>
        </div>
    </body>
</html>

is-superselector()函数

is-superselector() 函数用于比较两个选择器匹配的范围。判断第一个选择器是否包含了第二个选择器。

语法如下所示：

is-superselector(super, sub)

示例：

.one{   
    content: is-superselector("div", "div.con_p");
}
.two{   
    content: is-superselector("h3", "span");
}

编译成 CSS 代码：

.one {
  content: true;
}

.two {
  content: false;
}

从输出结果可以看出，因为 div 选择器中包含了 div.con_p 选择器所匹配的范围，所以输出结果返回 true。而 h3 选择器不包括 span 选择器匹配范围，所以输出结果返回 false。

selector-append函数

selector-append() 函数用于将一个或多个选择器添加到第一个选择器的后面。

示例：

例如我们将 con_p 选择器添加到 .con 选择器后面：

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

编译成 CSS 代码：

.one {
  content: .con.con_p;
}

selector-nest()函数

selector-nest() 函数返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表。

示例：

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

编译成 CSS 代码：

.one {
  content: ul li;
}

selector-parse()函数

selector-parse() 函数将字符串的选择符 selector 转换成选择器队列。

示例：

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

编译成 CSS 代码：

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

selector-replace()函数

selector-replace() 函数给定一个选择器，用replacement 替换 original 后返回一个新的选择器队列。

语法如下所示：

selector-replace(selector, original, replacement)

示例：

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

编译成 CSS 代码：

.one {
  content: .con_span.con;
}

selector-unify() 函数

selector-unify() 函数将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 null 值。

示例：

.one{   
    content: selector-unify("p", ".con_span");
}
.two{   
    content: selector-unify("h3", "p");
}

编译成 CSS 代码：

.one {
  content: p.con_span;
}

simple-selectors() 函数

simple-selectors() 函数将合成选择器拆为单个选择器。

示例：

例如下面这段代码：

.one{   
    content: simple-selectors("div.con_p");
}
.two{   
    content: simple-selectors("div.con_p.con_span");
}

编译成 CSS 代码：

.one {
  content: div, .con_p;
}

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

链接: https://fly63.com/article/detial/10463