如何优化SCSS代码：合并样式且避免给.mat-checkbox添加padding-right

原有两段CSS代码：

label, .mat-checkbox .mat-checkbox-layout .mat-checkbox-label {
    color: #5b5b5b !important;
    font-weight: 600 !important;
}

label {
    padding-right: 1em;
}

需求是避免重复编写label选择器，合并样式，但不能让.mat-checkbox相关的选择器继承padding-right属性。尝试以下写法未生效：

label, .mat-checkbox .mat-checkbox-layout .mat-checkbox-label {
    color: #5b5b5b !important;
    font-weight: 600 !important;
    
    & {
        padding-right: 1em;
    }
}

原因分析 #

你用的&嵌套写法（预处理器语法）会把父选择器列表整体代入，最终编译后会给label和.mat-checkbox...都加上padding-right，不符合需求。

解决方案 #

方案1：纯CSS原生写法（无预处理器） #

这是最直接的原生写法，公共样式只写一次，label的额外样式单独声明，已经没有多余重复：

/* 公共样式：给label和.mat-checkbox标签设置统一样式 */
label, .mat-checkbox .mat-checkbox-layout .mat-checkbox-label {
    color: #5b5b5b !important;
    font-weight: 600 !important;
}

/* 单独给label添加padding-right，不影响.mat-checkbox标签 */
label {
    padding-right: 1em;
}

方案2：使用Sass/LESS预处理器的混合宏（推荐，减少重复） #

如果项目使用预处理器，可以用混合宏提取公共样式，彻底避免重复编写属性：

Sass 示例：

// 定义公共样式混合宏
@mixin label-common-styles {
    color: #5b5b5b !important;
    font-weight: 600 !important;
}

// 给label应用公共样式+额外padding
label {
    @include label-common-styles;
    padding-right: 1em;
}

// 给.mat-checkbox标签只应用公共样式
.mat-checkbox .mat-checkbox-layout .mat-checkbox-label {
    @include label-common-styles;
}

LESS 示例：

// 定义公共样式混合宏
.label-common-styles() {
    color: #5b5b5b !important;
    font-weight: 600 !important;
}

// 给label应用公共样式+额外padding
label {
    .label-common-styles();
    padding-right: 1em;
}

// 给.mat-checkbox标签只应用公共样式
.mat-checkbox .mat-checkbox-layout .mat-checkbox-label {
    .label-common-styles();
}

方案3：CSS自定义属性（CSS变量） #

如果浏览器兼容性允许，可以用自定义属性提取公共样式：

:root {
    --label-color: #5b5b5b;
    --label-font-weight: 600;
}

label, .mat-checkbox .mat-checkbox-layout .mat-checkbox-label {
    color: var(--label-color) !important;
    font-weight: var(--label-font-weight) !important;
}

label {
    padding-right: 1em;
}

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