Sass 忽略选择器在CSS预编译器层次结构中的位置

假设我有：

.checkout-form-container {
    // styles

    .checkout-radio-buttons {
         // styles
    }
}

（我知道这可能是一个范围，但是）有没有办法告诉你。签出单选按钮忽略它在层次结构中的位置，并编译为：

.checkout-form-container {
     // styles
}        
.checkout-radio-buttons {
     // styles
}

为什么?

预编译器嵌套层次结构对于提高代码的可理解性非常有用。然而，就性能而言，仅使用顶级选择器比使用更复杂的选择模式更快

见：

选择器具有固有的效率，引用Steve Souders的话 效率从高到低的CSS选择器顺序如下：

• ID，例如#标题
• 类，例如促销
• 类型，例如div
• 相邻兄弟姐妹，如h2+p
• 儿童，例如li>ul
• 后代，例如ul a
• 通用的，即*
• 属性，例如[type=“text”]
• 伪类/-元素，例如a:hover

相反，如果希望性能更好（即使只是稍微好一点），您应该在css中编写唯一的类名（或非重复元素的ID）

因此，能够以嵌套选择模式编写代码将提高代码的可读性，同时保持顶级选择器的更高性能

我建议的解决方案需要一个顶级转义字符，例如

.checkout-form-container {
    // styles

    !.checkout-radio-buttons {
         // styles
    }
}

这将使选择器脱离其在层次结构中的位置。是否在违反堆栈溢出规则的情况下向技术的创建者提出价值主张（在本例中为less、sass和手写笔）？

您正在使用的

嵌套选择器编译为其子代组合器：

.parent {
  .child {
  }
}

产出：

.parent .child {}

.selector1,
.selector2 {
 // styles
}

div.form-container {
//styles
}

或者，您可以使用：

产出：

.parent .child {}

.selector1,
.selector2 {
 // styles
}

div.form-container {
//styles
}

可以用于组织您的混音器

#checkout {
 .form-container() { //styles}
}

//caller:
div.form-container {
#checkout > .form-container;
}

产出：

.parent .child {}

.selector1,
.selector2 {
 // styles
}

div.form-container {
//styles
}

您的问题表明您正在寻找名称空间，而您的类名表明您正在寻找嵌套

---

请注意，SASS和手写笔似乎也是如此。

这个问题的答案是否定的

---

目前，使用less.js无法在层次结构中声明选择器，但可以忽略它们在层次结构中的位置。

如果代码是以一种方式组织的，但编译成其他形式，则可能会造成混乱。.在SASS中，您可以使用

at-root（）

。