html - 根据具有嵌套 SCSS/& 符号的元素 (h2/h3) 设置类样式？

Question

我觉得我在这里遗漏了一些非常明显的东西，我可以为它编写 CSS，但我想知道是否有办法使用嵌套 SCSS 来完成它。如果您在一个类上有样式，如果该类位于不同的元素上，是否可以调整样式。例如 h2 然后是 h3。我知道你可以通过额外的类(class)来做到这一点，比如......

.title-class {
    background-size: 30px;
    font-size: 30px;

    &.another-class {
        background-size: 20px;
        font-size: 20px;
    }
}

这将呈现为 .title-class.another-class {}

我追求的是 .title-class {} 的基类和 h3.title-class {} 的嵌套样式 - 这可能吗？

我想像下面这样的(理论上)显然行不通!我尝试使用 @root，但我对此知之甚少，所以我无法让它发挥作用。

.title-class {
    background-size: 30px;
    font-size: 30px;

    &h3 {
        background-size: 20px;
        font-size: 20px;
    }
}

提前致谢!

Answer 1

如果您尝试使用 title-class 类定位所有 h3 元素，无需使用 @root指令您将使用以下内容:

h3 {
  &.title-class {
    color: blue
  }
}

查看 this already answered question如果您想使用 root 指令，尽管我个人认为在这种情况下它有点过于复杂。