& 符号和嵌套 SASS

Question

我只想知道在使用 Sass 时，简单嵌套

之间的区别

p{
   color: white;

    .text{
         text-decoration: underline;
     }

}

并使用“&”符号进行嵌套

p{
    color: white;

    &.text{
          text-decoration: underline;
     }

}

Answer 1

在第一个中 .text 必须是 p 的子元素（在 CSS 中是 p .text {...}），在第二个中 .text 规则适用于具有 text class（即 p.text {...}）

的所有 p 标签

Answer 2

没有符号的第一个示例将 select 具有 class 文本的 p 元素的每个子元素。带有符号的示例将 select 每个 p 元素与 class 文本。对于您的代码，使用第一个 selector 将使每个 p 元素的子元素具有文本 class 并带有下划线。但是，第二个 selector 将使每个带有文本 class 的 p 元素都带有下划线。

Answer 3

根据您的问题：

1.

p {
    color: white;
    .text {
    text-decoration: underline;
}

表示：CSS属性输出到p标签内的所有.textclass选择器。喜欢p .text{}

2.

p{
    color: white;
    
    &.text{
        text-decoration: underline;
    }
}

它表示：当您将 & 与 .text 选择器一起使用时，CSS 属性输出到 [=13= 内的所有 .text class 选择器] 标签。喜欢p.text{}

祝你好运！

& 符号和嵌套 SASS

Ampersand and nesting SASS

html

css

sass

css-selectors