Compatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗
目前只有 Dart Sass 支持使用 @use
加载内置模块。 其他实现的用户必须改为使用其全局名称调用函数。
选择器值
该模块中的函数检查和操作选择器。 每当他们返回一个选择器时,它总是一个以逗号分隔的 list(选择器列表),其中包含以空格分隔的列表(复杂选择器),其中包含 unquoted strings (复合选择器)。 例如,选择器.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
匹配的所有元素。
即使 $super
比 $sub
匹配_更多_个元素,仍然返回 true。
$super
和 $sub
选择器可能包含占位符选择器,但不包含父选择器。
SCSS Syntax
@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
中的任何选择器是选择器列表,则每个复杂选择器将单独组合。
$selectors
可能包含占位符选择器,但不包含父选择器。
另请参阅 selector.nest()
。
SCSS Syntax
@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
使用 @extend
规则 扩展 $selector
。
返回使用以下 @extend
规则修改的 $selector
的副本:
#{$extender} {
@extend #{$extendee};
}
换句话说,将 $selector
中的 $extendee
的所有实例替换为 $extendee, $extender
。 如果 $selector
不包含 $extendee
,则按原样返回。
$selector
、$extendee
和 $extender
选择器可能包含占位符选择器,但不包含[父选择器](/ 样式规则/父选择器)。
另请参阅 selector.replace()
。
SCSS Syntax
@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
可能包含占位符选择器。 与其他选择器函数不同,除了第一个之外,所有这些函数都可能包含 parent selectors。
另请参阅 selector.append()
。
SCSS Syntax
@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
Returns $selector
in the selector value format.
SCSS Syntax
@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
选择器可以包含 placeholder selectors,但不包含 [parent selectors](/ 样式规则/父选择器)。
另请参阅 selector.extend()
。
SCSS Syntax
@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
返回一个选择器,该选择器仅匹配由_both_ $selector1
和 $selector2
匹配的元素。
如果 $selector1
和 $selector2
不匹配任何相同的元素,或者没有可以表示它们重叠的选择器,则返回 null
。
与由 @extend
规则 生成的选择器一样,返回的选择器不能保证匹配_所有_由 $selector1
和 $selector2
如果它们都是复杂的选择器。
SCSS Syntax
@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
必须是包含复合选择器的单个字符串。 这意味着它不能包含组合符(包括空格)或逗号。
返回的列表以逗号分隔,简单选择器是不带引号的字符串。
SCSS Syntax
@debug selector.simple-selectors("a.disabled"); // a, .disabled
@debug selector.simple-selectors("main.blog:after"); // main, .blog, :after