Question

这个问题很容易解释。

这是输入：

.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

Answer 1

您必须首先复制>之前的父选择器，然后再深入研究它。但是，第三个孩子将输出为.a> .a-b> .a> .a-b-c {}，因此像在我的示例中一样，更容易退出一个级别并重新开始。

根据您的示例，我有created a sassmeister example for you可以解决问题。希望有帮助。

Other Tips on using the & that might help

后代选择器（>）与根选择器（＆）组合导致编译错误

1 个答案: