如何停止SASS复制CSS？

Question

我有以下SCSS。

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

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

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

Answer 1

查看sass基础知识here

搜索extend / inherirance部分和mixin部分。两者都提供了在sass文件中重用CSS规则的选项。

Answer 2

您可以使用styles extending功能和placeholder selectors来实现目标：

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

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

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