css - Sass 中 & sign 和 no & sign 的区别？

Question

这可能是一个非常简单的答案，但我无法在任何地方找到它。可能是我以某种方式错过了一个非常基本的 CSS 规则。

这是我的 Sass 代码:

h3 {
    font-size: 20px; 
    margin-bottom: 10px;
        &.some-selector {
            font-size: 24px;
            margin-bottom: 20px;
    }
}

输出:

h3 {
  font-size: 20px;
  margin-bottom: 10px; }
  h3.some-selector {
    font-size: 24px;
    margin-bottom: 20px; }

如果我取消“&”符号，会有什么不同？它只是在“h3”和“.some-selctor”之间添加了一个空格。 parent 和 child 之间的这个空间是什么意思？其实有什么区别吗？提前致谢。

Answer 1

有效显示的 & 表示“与此选择器组合/加入”。

h3 {
  &.some-selector {

在 CSS 选择器 h3.some-selector 中产生结果(匹配 具有 的 H3 元素>some-selector 类), 而

h3 {
  .some-selector {

CSS 选择器 h3 .some-selector 的结果(匹配 some-selector 类的元素，它们是后代 的 H3 元素)和扩展，

h3 {
  h3.some-selector {

在 CSS 选择器 h3 h3.some-selector 中产生结果。

参见:

• https://www.w3.org/TR/css3-selectors/ (技术性的，但有很多有用的信息，包括优先级和 CSS 表达式规则!)
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors