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

【问题标题】：Possible to reach up to the top of a nested selector by using multiple parent selectors?可以通过使用多个父选择器到达嵌套选择器的顶部吗？
【发布时间】：2011-06-05 01:41:12
【问题描述】：

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

有什么办法可以做到吗？

【问题讨论】：

这实际上是一个非常糟糕的做法，即使它是可能的，因为您暗示 .callout 是 .entry 的子代，而您实际上希望它是 #main 的子代。如果你重复使用一个属性块，你可以考虑将它们移动到一个 mixin 中。
如果它确实有效，我希望它实际编译为：#main .post .entry .title, #main.callout { font-size: 3em; } ?

标签： ruby haml sass

【解决方案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; }

【讨论】：

啊，我从来没有使用过@extend，完全忘记了它的存在。这一点也不坏。谢谢