小编MrL*_*ner的帖子

我正在尝试学习 SASS，我想使用 sass 来设计我的多级菜单的第一级。假设这是标记：

ul.menu
  li.menu-item
    ul.sub-menu
      li.menu-item

在 CSS 中，我可以用

ul.menu > menu-item

但我不能让 ">" 在 SASS 上工作。有没有另一种方法可以做到这一点？

编辑：

忘了补充说我正在使用 & 所以我用这个标记尝试它：

.menu{
  > &-item{
    color: red;
  }
}

我试图了解box-sizing: border-box下面的代码是如何工作的。当设置高度或宽度（无填充）时，它会按预期工作（边框出现在 div 内部）。但如果只使用padding来创建div的尺寸，则不起作用。有人可以解释为什么吗？这是演示：

div.test {
  background-color: red;
  box-sizing: border-box;
  display: inline-block;
  border: 5px solid;
  text-align: center;
  padding: 50px;
  vertical-align: middle;
  // height: 100px;
  // width: 100px;
}

div.test:first-of-type {
  border: none;
}

<div class="test">aa</div>
<div class="test">aa</div>

https://codepen.io/anon/pen/bxaBER