时间戳

首页 > 解决方案 > 后代选择器 (>) 与根选择器 (&) 结合导致编译错误

sass - 后代选择器 (>) 与根选择器 (&) 结合导致编译错误

问题描述

这个问题很容易解释。

这是输入：

.a {
    position: relative;
    overflow: hidden;
    width: 960px;
    background: #a3c1ef;
    height: 100%;
    margin: 0 auto;

    > &-b {
        list-style: none;
        > &-c {
            display: inline-block;
            color: blue;
            font-size: 100px;
        }
    }
}

这是预期的输出：

.a {
  position: relative;
  overflow: hidden;
  width: 960px;
  background: #a3c1ef;
  height: 100%;
  margin: 0 auto;
}
.a > a-b {
  list-style: none;
}
.a > a-b > a-b-c {
  display: inline-block;
  color: blue;
  font-size: 100px;
}

这是我得到的实际输出：

.a {
  position: relative;
  overflow: hidden;
  width: 960px;
  background: #a3c1ef;
  height: 100%;
  margin: 0 auto;
}
> .a-b {
  list-style: none;
}
> > .a-b-c {
  display: inline-block;
  color: blue;
  font-size: 100px;
}

当我删除根选择器&时，输出如预期：a > b > c. 但是当我将根选择器&与直接后代选择器结合使用时>，输出是上面的。这种行为非常违反直觉。有人可以解释如何解决它（如果可能的话）？

SASS 编译器版本：1.12.0

标签： sass

解决方案

您必须首先在 > 之前复制父选择器，然后深入了解它。然而，第三个孩子将作为 .a > .ab > .a > .abc {} 输出，因此更容易跨出一个级别并重新开始，就像在我的示例中一样。

我根据您的示例为您创建了一个 sassmeister 示例，该示例应该可以解决问题。希望有帮助。

使用 & 的其他提示可能会有所帮助

推荐阅读