在 CSS 中使用“&”选择器的基本原理是什么？答案

【问题标题】：What is the rationale for using "&" selector in CSS?在 CSS 中使用“&”选择器的基本原理是什么？
【发布时间】：2020-09-15 17:34:33
【问题描述】：

.menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX
(-100%);
    transition: tranlation: all ease
0.25s;
    &.open {
        transform: translateX (0);
    }
}

js文件：

$(document).ready (function (){
    ${".navbar-toggler"}.on("click", function (){
        $("menu").toggleClass ("open");
    });
});

&.open 没有在我的代码中被选中，并且在我的文本编辑器（VS 代码）中带有红色下划线，但讲师实现了相同的代码。请问在 CSS 中使用“&”有什么理由吗？

【问题讨论】：

这看起来更像是less或scss，将.open移到父级下方并使用.menu.open。
请注意，transition: tranlation: all ease 0.25s;{ 末尾有一个 {
哦，原来如此。这是我在这里输入代码时的一个错误，但实际上并不是我在文本上实现的代码

标签： html jquery css bootstrap-4

【解决方案1】：

&.className 或 &:pseudo-class 基本上是编写选择器的 SCSS 语法，旨在在 className 属性中选择多个场景。例如。在您的代码中，.menu 类在<html> 结构中还将有另一个名为.open 的类，因此这意味着您正在选择一个类名同时为.menu 和.open 的元素，这是一种写作方式SASS-SCSS 中的嵌套代码，一个 CSS 预处理器。以 .CSS 扩展名保存的典型文件可能无法读取此语法并因此引发错误。希望这个答案有帮助。万事如意！

【讨论】：