.title 选择器中 h1 的 Sass 嵌套

Question

我试过 sass

.title {
    font-weight: bold;
    // more title styles
    &h1 {
        font-size: 30px;
    }
}

生成的 css 是：

.titleh1 {
    font-weight: bold;
    // more title styles
}
.titleh1 {
    font-size: 30px;
}

无论如何我可以将 h1 嵌套在 .title 中以提供这样的 css 输出吗？

.titleh1 {
    font-weight: bold;
    // more title styles
}
h1.title {
    font-size: 30px;
}

Answer 1

是的，您只需要the @at-root directive 即可跳出嵌套选择器：

.title {
    font-weight: bold;
    // more title styles

    @at-root {
      h1#{&} {
        font-size: 30px;
      }
    }
  }