Sass 选择器函数

最后更新于:2022-03-27 02:40:19

Sass 选择器函数

Sass 选择器函数 Sass 函数

Sass 选择器函数用于查看与处理选择器。

下表列出了 Sass 的 选择器函数:

函数 描述 & 实例
is-superselector(super, sub) 比较两个选择器匹配的范围,即判断 super 选择器是否包含了
sub 选择器所匹配的范围,是的话返回 true,否则返回 false。

实例:
is-superselector(“div”, “div.myInput”)
结果: true
is-superselector(“div.myInput”,
“div”)
结果: false
is-superselector(“div”,
“div”)
结果: true

selector-append(selectors) 将第二个 (也可以有多个) 添加到第一个选择器的后面。
selector.

实例:
selector-append(“div”, “.myInput”)
结果: div.myInput
selector-append(“.warning”,
“__a”)
结果: .warning__a

selector-extend(selector, extendee, extender)  
selector-nest(selectors) 返回一个新的选择器,该选择器通过提供的列表选择器生成一个嵌套的列表。

实例:
selector-nest(“ul”, “li”)
结果: ul li
selector-nest(“.warning”,
“alert”, “div”)
结果: .warning div, alert div

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

实例:
selector-parse(“h1 .myInput .warning”)
结果: (‘h1’ ‘.myInput’
‘.warning’)

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

实例:
selector-replace(“p.warning”, “p”, “div”)
结果: div.warning

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

实例:
selector-unify(“myInput”, “.disabled”)
结果: myInput.disabled
selector-unify(“p”, “h1”)
结果: null

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

实例:
simple-selectors(“div.myInput”)
结果: div, .myInput
simple-selectors(“div.myInput:before”)
结果: div, .myInput,
:before


Sass 选择器函数 Sass 函数