SCSS 嵌套与 & 符号未按预期工作

Question

我有一个 JSFiddle，https://jsfiddle.net/khpeek/3gh0r931/43/，我想在其中根据父元素的类（设置为 asc 或 desc 通过一个 jQuery 插件，list.js)。

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

.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";
}

然后我得到预期的行为。 （此代码在 JSFiddle 中被注释掉）。 （我仍然想将图标放在彼此的顶部以制作类似于https://www.datatables.net/ 的“钻石”，但这是一个单独的问题）。

这个 SCSS 表达式的“嵌套”形式有什么问题？

Answer 1

你的嵌套很好，你只是在font-size 行之后有一个语法错误：

i.material-icons {
  position: relative;
  font-size: $th-font-size * 2;
  {
    &.upper: margin-top: -$th-font-size/2;
    &.lower: margin-bottom: -$th-font-size/2;
  }
}

你可能是这个意思：

i.material-icons {
  position: relative;
  font-size: $th-font-size * 2;

  &.upper { margin-top: -$th-font-size/2; }
  &.lower { margin-bottom: -$th-font-size/2; }
}