在Sass中修改选择器的中间(添加/删除类等)

Question

我的菜单中有样式链接的以下SCSS:

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元素,并selector-append()在Sass中使用它来附加类.但这似乎以错误的顺序进行追加(如果参数反转,则该类将附加到最后一个元素!):

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()方法)？

Answer 1

简短的回答

由于我们要替换的元素具有唯一的名称,我们正在寻找的是:

nav {
    ul {
        li {
            a {
                color: red;

                @at-root #{selector-replace(&, 'ul', 'ul.opened')} {
                    color: green;
                }
            }
        }
    }
}

答案很长

操纵选择器是非常脏的,除非你绝对必须,否则我会反对它.如果你通过指定的东西像overqualifying您的选择table tr td或ul liTR和UL在这些选择两个冗余(除非你想避免下一个有序列表的造型元素),然后通过简化启动.调整您的嵌套更简单等.

从Sass 3.4版开始,有两个重要的功能允许您修改选择器.

• 选择器功能
• 父选择器可以存储在变量中

例:

.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 selector-nth($sel, $n, $f, $args...) {
    $collector: ();
    @each $s in $sel {
        $modified: call($f, nth($s, $n), $args...);
        $collector: append($collector, set-nth($s, $n, $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, .bar {
    ul > li a {
        color: red;

        @at-root #{selector-nth(&, -2, insert-selector, '.baz')} {
            color: blue;
        }
    }
}

输出:

.foo ul > li a, .bar ul > li a {
  color: red;
}
.foo ul > .baz li a, .bar ul > .baz li a {
  color: blue;
}

删除选择器

删除选择器就像用空字符串替换选择器一样简单.

@function remove-selector($sel) {
    @return '';
}

.foo, .bar {
    ul > li a {
        color: red;

        @at-root #{selector-nth(&, -2, remove-selector)} {
            color: blue;
        }
    }
}

输出:

.foo ul > li a, .bar ul > li a {
  color: red;
}
.foo ul > a, .bar ul > a {
  color: blue;
}

TL; DR

选择器只是一个列表.任何列表操作函数都可以使用它,您可以循环它以根据需要进行修改.

所以是的,除非你真的真的需要,否则不要这样做.如果您确定仍然需要它,我已将这些功能打包到选择器库中.