是否可以通过使用多个父选择器到达嵌套选择器的顶部？

Question

在 SCSS 中，单个“&”将被父选择器替换。我认为应该可以执行以下操作：

#main {
    .post {
        .date {}
        .entry {

            margin-right: 0.833em;

            .title,
            &&&.callout { font-size: 3em; }
        }
    }
}

理想情况下，前面的内容将编译为包含以下规则：

#main .post .entry .title { font-size: 3em; }
#main .callout { font-size: 3em; }

有什么方法可以使这项工作起作用吗？

Answer 1

这在 SCSS 中是不可能的。你能做的最好的

#main {
  .callout { font-size: 3em; }

  .post {
    .entry {
      margin-right: 0.833em;

      .title {
        @extend .callout;
      }
    }
  }
}

事情就是编译为

#main .callout, #main .post .entry .title {
  font-size: 3em; }
#main .post .entry {
  margin-right: 0.833em; }