css - '&.'中的 '&.sub-title'在scss中表示什么？

Question

我是 CSS 和 SCSS 的新手。

在下面的代码中，

.title {
    width: 718px;
    &.sub-title {
      width: 938px;
   }
}

&. 是什么意思？和嵌套类一样吗？

Answer 1

& 连接父类，生成 .title.sub-title(而不是 .title .sub-title，如果& 被省略)。

结果是 & 匹配了同时具有 title 和 sub-title 类的元素:

<div class='title sub-title'></div> <!-- << match -->

如果没有 &，它会匹配具有 title 类的元素的 sub-title 类的后代:

<div class='title'>
  ...
    <div class='sub-title'></div> <!-- << match -->
  ...
</div>