Css SCS与安培嵌套，未按预期工作

我有一个JSFIDLE，其中我想根据父元素的类切换上/下物化箭头图标的可见性（jQuery插件

list.js

将其设置为

asc

或

desc

）

我注意到以下嵌套模式不起作用：

.sort.asc > i.material-icons {
  &.upper::after {
    content: "arrow_drop_up";
  }
  &.lower::after {
    content: "";
  }
}

.sort.desc > i.material-icons {
  &.upper::after {
    content: "";
  }
  &.lower::after {
    content: "arrow_drop_down";
  }
}

但是，如果我像这样“写出”嵌套

.sort.asc > i.material-icons.upper::after {
  content: "arrow_drop_up";
}
.sort.asc > i.material-icons.lower::after {
  content: "";
}
.sort.desc > i.material-icons.upper::after {
  content: "";
}
.sort.desc > i.material-icons.lower::after {
  content: "arrow_drop_down";
}

然后我得到了预期的行为。（此代码在JSFIDLE中注释掉）。（我仍然想将图标放置在彼此的顶部，以制作类似的“菱形”，但这是一个单独的问题）

---

此SCSS表达式的“嵌套”形式有什么问题

您的嵌套很好，只是在

字体大小

行之后出现语法错误：

i.material-icons{
位置：相对位置；
字体大小：$th字体大小*2；
{
&.上：页边距顶部：-$th字体大小/2；
&.下：页边距底部：-$th字体大小/2；
}
}

你可能是这个意思：

i.material-icons{
位置：相对位置；
字体大小：$th字体大小*2；
&.upper{页边距顶端：-$th字体大小/2；}
&.下{页边距底部：-$th字体大小/2；}
}

FWIW，我喜欢这个快速测试Sass的站点