sass:selector
- Dart·Sass（Dart Sass）
- 从 1.23.0开始
- LibSass
- ✗
- rubySass
- ✗
目前只有Dart Sass支持使用加载内置模块@use。其他实现的用户必须使用其全局名称来调用函数。
选择器值永久链接选择器值
该模块中的功能检查和操纵选择器。每当他们返回选择器时，它始终是一个逗号分隔的列表（选择器列表），其中包含以空格分隔的列表（复杂的选择器），其中包含未加引号的字符串（复合选择器）。例如，选择器.main aside:hover, .sidebar p将返回为：
@debug ((unquote(".main") unquote("aside:hover")),
(unquote(".sidebar") unquote("p")));
// .main aside:hover, .sidebar p
这些函数的选择器参数可能具有相同的格式，但它们也可以只是普通字符串（带引号或不带引号）或它们的组合。例如，".main aside:hover, .sidebar p"是有效的选择器参数。
selector.is-superselector($super, $sub)
is-superselector($super, $sub) //=> boolean 返回选择器是否$super匹配选择器匹配的所有元素$sub 。
不过返回true，即使$super比赛更多的元素比 $sub。
该$super和$sub选择可能包含占位符选择，而不是家长选择。
SCSS 语法
@debug selector.is-superselector("a", "a.disabled"); // true
@debug selector.is-superselector("a.disabled", "a"); // false
@debug selector.is-superselector("a", "sidebar a"); // true
@debug selector.is-superselector("sidebar a", "a"); // false
@debug selector.is-superselector("a", "a"); // true
Sass语法
@debug selector.is-superselector("a", "a.disabled") // true
@debug selector.is-superselector("a.disabled", "a") // false
@debug selector.is-superselector("a", "sidebar a") // true
@debug selector.is-superselector("sidebar a", "a") // false
@debug selector.is-superselector("a", "a") // true
selector.append($selectors...)
selector-append($selectors...) //=> selector 合并时$selectors没有后代合并器 -即它们之间没有空格。
如果其中的任何选择器$selectors是一个选择器列表，则每个复杂的选择器将单独组合。
另请参阅selector.nest()。
SCSS 语法
@debug selector.append("a", ".disabled"); // a.disabled
@debug selector.append(".accordion", "__copy"); // .accordion__copy
@debug selector.append(".accordion", "__copy, __image");
// .accordion__copy, .accordion__image
Sass语法
@debug selector.append("a", ".disabled") // a.disabled
@debug selector.append(".accordion", "__copy") // .accordion__copy
@debug selector.append(".accordion", "__copy, __image")
// .accordion__copy, .accordion__image
selector.extend($selector, $extendee, $extender)
selector-extend($selector, $extendee, $extender) //=> selector $selector按照@extend规则扩展。
返回$selector使用以下@extend 规则修改的副本：
#{$extender} {
@extend #{$extendee};
}
换句话说，替换的所有实例$extendee中$selector使用$extendee, $extender。如果$selector不包含$extendee，则按原样返回。
的$selector，$extendee和$extender选择可能包含占位符选择，而不是家长选择。
另请参阅selector.replace()。
SCSS 语法
@debug selector.extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled
@debug selector.extend("a.disabled", "h1", "h2"); // a.disabled
@debug selector.extend(".guide .info", ".info", ".content nav.sidebar");
// .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar
Sass语法
@debug selector.extend("a.disabled", "a", ".link") // a.disabled, .link.disabled
@debug selector.extend("a.disabled", "h1", "h2") // a.disabled
@debug selector.extend(".guide .info", ".info", ".content nav.sidebar")
// .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar
selector.nest($selectors...)
selector-nest($selectors...) //=> selector $selectors好像在样式表中彼此嵌套一样合并。
在$selectors可能包含占位选择。与其他选择器功能不同，除第一个选择器功能外，所有其他功能都可能包含父选择器。
另请参阅selector.append()。
SCSS 语法
@debug selector.nest("ul", "li"); // ul li
@debug selector.nest(".alert, .warning", "p"); // .alert p, .warning p
@debug selector.nest(".alert", "&:hover"); // .alert:hover
@debug selector.nest(".accordion", "&__copy"); // .accordion__copy
Sass语法
@debug selector.nest("ul", "li") // ul li
@debug selector.nest(".alert, .warning", "p") // .alert p, .warning p
@debug selector.nest(".alert", "&:hover") // .alert:hover
@debug selector.nest(".accordion", "&__copy") // .accordion__copy
selector.parse($selector)
selector-parse($selector) //=> selector $selector以选择器值 格式返回。
SCSS 语法
@debug selector.parse(".main aside:hover, .sidebar p");
// ((unquote(".main") unquote("aside:hover")),
// (unquote(".sidebar") unquote("p")))
Sass语法
@debug selector.parse(".main aside:hover, .sidebar p")
// ((unquote(".main") unquote("aside:hover")),
// (unquote(".sidebar") unquote("p")))
selector.replace($selector, $original, $replacement)
selector-replace($selector, $original, $replacement) //=> selector 返回的副本，$selector其中所有实例$original均被替换 $replacement。
这使用@extend规则的智能统一来确保$replacement无缝集成到$selector。如果$selector不包含$original，则按原样返回。
的$selector，$original和$replacement选择可能包含占位符选择，而不是家长选择。
另请参阅selector.extend()。
SCSS 语法
@debug selector.replace("a.disabled", "a", ".link"); // .link.disabled
@debug selector.replace("a.disabled", "h1", "h2"); // a.disabled
@debug selector.replace(".guide .info", ".info", ".content nav.sidebar");
// .guide .content nav.sidebar, .content .guide nav.sidebar
Sass语法
@debug selector.replace("a.disabled", "a", ".link") // .link.disabled
@debug selector.replace("a.disabled", "h1", "h2") // a.disabled
@debug selector.replace(".guide .info", ".info", ".content nav.sidebar")
// .guide .content nav.sidebar, .content .guide nav.sidebar
selector.unify($selector1, $selector2)
selector-unify($selector1, $selector2) //=> selector | null 返回一个，只有匹配的元素相匹配选择都 $selector1和 $selector2。
返回null如果$selector1和$selector2不匹配任何相同的元素，或者如果没有选择，可以表达自己的重叠。
像@extend规则生成的选择器一样，返回的选择器也不保证匹配所有匹配的元素$selector1，$selector2如果它们都是复杂的选择器，则也不保证。
SCSS 语法
@debug selector.unify("a", ".disabled"); // a.disabled
@debug selector.unify("a.disabled", "a.outgoing"); // a.disabled.outgoing
@debug selector.unify("a", "h1"); // null
@debug selector.unify(".warning a", "main a"); // .warning main a, main .warning a
Sass语法
@debug selector.unify("a", ".disabled") // a.disabled
@debug selector.unify("a.disabled", "a.outgoing") // a.disabled.outgoing
@debug selector.unify("a", "h1") // null
@debug selector.unify(".warning a", "main a") // .warning main a, main .warning a
selector.simple-selectors($selector)
simple-selectors($selector) //=> list 返回中的简单选择器列表 $selector。
的$selector必须是包含化合物选择一个字符串。这意味着它可能不包含组合符（包括空格）或逗号。
返回的列表以逗号分隔，简单的选择器为未加引号的字符串。