如何基于已有CSS样式派生新样式以消除代码冗余？

当然可以消除这两处重复定义，下面是两种实用的解决思路：

方法一：利用CSS类的层叠（原生CSS即可实现） #

把公共样式抽离到基础类.open_in_new中，再单独定义一个只修改颜色的类，HTML中同时添加两个类名：

// 公共基础样式
.open_in_new {
  font-size: 18px;
  margin-top: 5px;
  color: mat-color($teal, 500);
}

// 仅覆盖颜色的禁用样式
.open_in_new.disabled {
  color: mat-color($grey, 500);
}

HTML使用方式：

<!-- 正常状态 -->
<mat-icon class="open_in_new">open_in_new</mat-icon>

<!-- 禁用状态 -->
<mat-icon class="open_in_new disabled">open_in_new</mat-icon>

这种方式不需要预处理器，完全依赖CSS的层叠优先级，简单直观。

方法二：使用Sass的@extend继承（适合预处理器场景） #

因为你用到了mat-color这类Sass变量，直接用Sass的继承特性，让.open_in_new_disabled继承基础类的所有样式，仅重写颜色：

.open_in_new {
  font-size: 18px;
  margin-top: 5px;
  color: mat-color($teal, 500);
}

.open_in_new_disabled {
  @extend .open_in_new; // 继承基础类所有样式
  color: mat-color($grey, 500); // 仅修改颜色
}

HTML可以保持原来的写法不变：

<mat-icon class="open_in_new_disabled">open_in_new</mat-icon>

编译后的CSS会自动合并选择器，避免代码重复，同时不用改动已有的HTML结构。

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