在.title选择器中嵌套h1

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;
      }
    }
  }