nav {
ul {
li {
a {
color: red
}
}
}
ul.opened {
li {
a {
color: green
}
}
}
}
哪个生成以下(正确)CSS：
nav ul li a {
color: red;
}
nav ul.opened li a {
color: green;
}
我尝试修改我的JavaScript以将类应用于nav元素,并在Sass中使用selector-append()来附加类.但这似乎以错误的顺序进行追加(如果参数被反转,则该类将附加到最后一个元素！)：
nav {
ul {
li {
a {
color: red;
@at-root #{selector-append('.opened',&)} {
color: green;
}
}
}
}
}
输出(不正确！)：
nav ul li a {
color: red;
}
.openednav ul li a {
color: green;
}
有没有一种方法可以重写SCSS,以便可以正确地附加类,而不必重复选择器(类似于selector-append()方法)？
解决方法
由于我们要替换的元素具有唯一的名称,我们正在寻找的是：
nav {
ul {
li {
a {
color: red;
@at-root #{selector-replace(&,'ul','ul.opened')} {
color: green;
}
}
}
}
}
答案很长
操纵选择器是非常脏的,除非你绝对必须,否则我会反对它.如果你通过指定诸如table tr td或ul li之类的东西来高估你的选择器,那么首先要简化：tr和ul在这些选择器中都是多余的(除非你试图避免在有序列表下的样式元素).调整您的嵌套更简单等.
从Sass 3.4版开始,有两个重要的功能允许您修改选择器.
> Selector functions
>父选择器可以存储在变量中
例：
.foo ul > li a,.bar {
$sel: &;
@debug $sel;
}
您将始终获得字符串列表的列表,因为选择器可以用逗号链接在一起,即使您只有一个选择器也是如此.
.foo ul > li a,.bar { ... }
(1 2 3 4 5),(1)
您将注意到后代选择器在此处计数(Sass中的列表可以是空格或逗号分隔).记住这一点非常重要.
当selector-replace()不起作用时
在以下情况下,selector-replace()函数不起作用：
>您要替换的选择器不是唯一的(例如,ul ul li)
>您想插入一个或多个选择器(例如,ul ul li – > ul ul ul li)
>您想要删除选择器(例如,ul> li – > ul li)
在这种情况下,您需要遍历选择器,您需要知道要修改的位置.以下函数将使用函数并使用call() function的魔力将其应用于选择器中的特定位置.
@function selector-nth($sel,$n,$f,$args...) {
$collector: ();
@each $s in $sel {
$modified: call($f,nth($s,$n),$args...);
$collector: append($collector,set-nth($s,$modified),comma);
}
@return $collector;
}
附加一个类(当选择器不唯一或你不知道它的名字时)
我们需要的函数有两个参数：原始选择器和你想要追加的选择器.使用简单插值来完成工作.
@function append-class($a,$b) {
@return #{$a}#{$b};
}
.foo,.bar {
ul > li a {
color: red;
@at-root #{selector-nth(&,-2,append-class,'.baz')} {
color: blue;
}
}
}
输出：
.foo ul > li a,.bar ul > li a {
color: red;
}
.foo ul > li.baz a,.bar ul > li.baz a {
color: blue;
}
插入选择器
此函数还有两个参数：原始选择器和您想要在其之前插入的选择器.
@function insert-selector($a,$b) {
@return $b $a;
}
.foo,insert-selector,.bar ul > li a {
color: red;
}
.foo ul > .baz li a,.bar ul > .baz li a {
color: blue;
}
删除选择器
删除选择器就像用空字符串替换选择器一样简单.
@function remove-selector($sel) {
@return '';
}
.foo,remove-selector)} {
color: blue;
}
}
}
输出：
.foo ul > li a,.bar ul > li a {
color: red;
}
.foo ul > a,.bar ul > a {
color: blue;
}
TL; DR
选择器只是一个列表.任何列表操作函数都可以使用它,您可以循环它以根据需要进行修改.
所以,是的,除非你真的真的需要,否则不要这样做.如果您确定仍然需要它,我已将这些功能打包到selector-nth library中.
