Sass基础——选择器函数 Selector Functions

2141 4 年前
选择器函数在他们所支持的选择器参数格式上非常灵活,这些参数可以是字符串、& 返回的列表等等

选择器函数在他们所支持的选择器参数格式上非常灵活,这些参数可以是字符串、& 返回的列表以及下面的情况:

  1. 一个原始的字符串,例如:“.foo .bar, .baz .bang”;
  2. 用空格分隔的字符串列表,例如:(“.foo” “.bar”);
  3. 用逗号分隔的字符串列表,例如:(“.foo .bar”, “.baz .bang”);
  4. 用逗号分队的字符串列表的列表,例如:((“.foo” “.bar”), (“.baz” “.bang”))

一般来说,选择器函数允许占位符(%),但不允许父引及选择器&

selector-nest($selectors…)

selector-nest($selectors…),使用$selectors提供的选择器返回一个相互嵌套的选择器。就像在样式表中使用$selector1 { $selector2 { … } }一样。

跟大多部选择器函数不一样,selector-nest允许&引用父选择,但其不能用于第一个。

selector-nest(".foo", ".bar", ".baz") => .foo .bar .baz
selector-nest(".a .foo", ".b .bar") => .a .foo .b .bar
selector-nest(".foo", "&.bar") => .foo.bar

至少传递一个选择器参数,参数必须是一个字符串、字符串列表或者是一个字符串列表的列表作为&的返回值。

selector-append($selectors…)

selector-append($selectors…):把$selectors的选择器连接成为一个新的选择器,就像使用$selector1 { &$selector2 { … } }一样,彼此直接相连,中间没有空格。

selector-append(".foo", ".bar", ".baz") => .foo.bar.baz
selector-append(".a .foo", ".b .bar") => "a .foo.b .bar"
selector-append(".foo", "-suffix") => ".foo-suffix"

selector-extend($selector, $extendee, $extender)

selector-extend($selector, $extendee, $extender)$selector中其一选择器$extendee$extender扩展。

返回$extender扩展$extendee$selector后的新版本,这个工作就像:

$selector { ... }
$extender { @extend $extendee }
selector-extend(".a .b", ".b", ".foo .bar") => .a .b, .a .foo .bar, .foo .a .bar

selector-replace($selector, $original, $replacement)

selector-replace($selector, $original, $replacement):在$selector中,使用$replacement替换$original

通过使用@extend然后再将original选择器丢掉来达到效果,这意味着可以用来做很多先进事情。比如:

selector-replace(".foo .bar", ".bar", ".baz") => ".foo .baz"
selector-replace(".foo.bar.baz", ".foo.baz", ".qux") => ".bar.qux"

selector-unify($selector1, $selector2)

selector-unify($selector1, $selector2):把两个选择器参数统一为一个新选择器,这个新选择器匹配的元素也能匹配这两个选择器参数。

selector-unify(".a", ".b") => .a.b
selector-unify(".a .b", ".x .y") => .a .x .b.y, .x .a .b.y
selector-unify(".a.b", ".b.c") => .a.b.c
selector-unify("#a", "#b") => null

is-superselector($super, $sub)

is-superselector($super, $sub):判断$super是否匹配$sub匹配的所有元素或者有可能更多。

is-superselector(".foo", ".foo.bar") => true
is-superselector(".foo.bar", ".foo") => false
is-superselector(".bar", ".foo .bar") => true
is-superselector(".foo .bar", ".bar") => false

simple-selectors($selector)

simple-selectors($selector):返回一个能包含复合选择器匹配结果的简单选择器。

$selector必须是复合选择器,不能有空格或逗号,跟其他选择器函数不一样在,他只能是一个字符串,不能是一个列表。

simple-selectors(".foo.bar") => ".foo", ".bar"
simple-selectors(".foo.bar.baz") => ".foo", ".bar", ".baz"

selector-parse($selector)

selector-parse($selector):

分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6