SCSS含&符号的嵌套未按预期工作：Materialize箭头切换失效

看起来你遇到的问题是SCSS嵌套选择器的写法有误，导致无法正确根据父元素的asc/desc类切换箭头图标。让我来帮你梳理一下问题和解决方案：

问题分析 #

你原来的SCSS代码：

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

这里的&.upper会被编译成.sort.asc > i.material-icons.upper，这只有当.upper是<i>元素的类时才生效。但如果你的HTML结构是.upper/.lower是<i>的子元素（比如<span>），这个选择器就会匹配不到目标元素。

另外，Materialize的图标默认使用::before伪元素，如果你用::after，需要确保字体样式正确继承，否则图标可能无法正常显示。

解决方案 #

根据你的HTML结构，分两种情况处理：

情况1：每个箭头是单独的<i>元素（带.upper/.lower类）

如果你的HTML是这样的：

<th class="sort asc" data-sort="name">
  Name
  <i class="material-icons upper"></i>
  <i class="material-icons lower"></i>
</th>

你的SCSS写法本身逻辑是对的，但需要补充图标显示的基础样式：

.sort {
  > i.material-icons {
    /* 确保伪元素能正确渲染Material图标 */
    display: inline-block;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;

    /* 默认隐藏所有箭头 */
    &.upper::after,
    &.lower::after {
      content: "";
    }
  }

  /* 升序状态：显示上箭头，隐藏下箭头 */
  &.asc {
    > i.material-icons.upper::after {
      content: "arrow_drop_up";
    }
  }

  /* 降序状态：显示下箭头，隐藏上箭头 */
  &.desc {
    > i.material-icons.lower::after {
      content: "arrow_drop_down";
    }
  }
}

情况2：箭头是<i>的子元素（比如<span>）

如果你的HTML结构是这样的：

<th class="sort asc" data-sort="name">
  Name
  <i class="material-icons">
    <span class="upper"></span>
    <span class="lower"></span>
  </i>
</th>

需要去掉&符号，直接选择子元素：

.sort {
  > i.material-icons {
    .upper::after,
    .lower::after {
      content: "";
      /* 同样需要添加Material图标的字体基础样式 */
      font-family: 'Material Icons';
      /* 其他样式同上 */
    }
  }

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

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

额外提示 #

• 确保你已经正确引入了Materialize的字体文件，否则图标无法显示。
• 如果List.js动态切换父元素的asc/desc类时样式不生效，可以检查是否有其他CSS规则优先级更高覆盖了你的样式，或者临时添加!important作为调试手段（不推荐长期使用）。

内容的提问来源于stack exchange，提问作者Kurt Peek