如何阻止SASS复制CSS？

我有以下SCS

.mat-tab-label { 
  &:focus {
    background-color: #1976d2 !important; color:white;
  }
}

.mat-tab-label-active {
  background-color: #1976d2 !important; color:white;
}

两个选择器需要相同的属性，但如何删除重复项？变量只存储单个值。

查看sass基础

搜索扩展/插入部分和混合部分。两者都提供了跨sass文件重用CSS规则的选项。

您可以使用功能并实现您的目标：

%tab-label {
    background-color: #1976d2 !important; 
    color:white;
}

.mat-tab-label { 
  &:focus {
    @extend %tab-label;
  }
}

.mat-tab-label-active {
    @extend %tab-label;
}