SCSS中如何按父元素条件设置样式 仅tbody内net-price列右对齐

解决方法 #

你可以利用SCSS的父选择器&实现需求，修改后的代码如下：

.service-grid {
  &__wrapper {
    margin: 0;
    background-color: $white;
    &__header {
      font-family: "Roboto-Medium";
      display: flex;
    }
    &__body {
      display: flex;
      font-family: "Roboto-Regular";
    }
    .net-price {
      width: 160px;
      /* 仅表体净价列生效的样式 */
      .service-grid__wrapper__body & {
        text-align: right;
      }
    }
  }
}

原理说明 #

• SCSS中的&会替换为当前所在的选择器，这里&指代.net-price，上述规则编译为原生CSS后为.service-grid__wrapper__body .net-price
• 该选择器只会命中父容器为service-grid__wrapper__body（即表体）的净价列，表头的净价列父容器为service-grid__wrapper__header，不会命中该规则
• width: 160px规则同时作用于表头和表体的净价列，保证二者宽度统一的要求不变

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