SCSS如何读取已有类的属性值并赋值给新类的指定属性

结论 #

原生SCSS不支持直接引用已定义类的指定属性值，你示例中的.red.color语法无法直接生效，可通过以下几种可行方案实现需求：

方案1：公共变量对齐（最推荐） #

无需修改原有不可动的.red类代码，只需新增和.red属性值对齐的SCSS变量即可：

// 你可自行新增的变量定义，取值和原有.red的color属性保持一致即可
$red-color: red;

// 原有不可修改的.red类代码（无需改动）
.red {
    color: red;
}

// 新类实现
.newClass {
    background-color: $red-color;
}

该方案实现成本最低，编译结果完全符合预期，没有额外冗余代码。

方案2：CSS currentColor特性（适用特定场景） #

如果你的页面DOM结构中，应用.newClass的元素继承到的color值就是.red类的red，可以直接用CSS原生的currentColor关键字：

.newClass {
    background-color: currentColor;
}

该方案属于CSS运行时特性，不需要SCSS额外处理，但仅适用于元素color属性值刚好是目标值的场景。

其他说明 #

如果一定要在SCSS编译阶段自动提取已定义类的属性值，需要借助SCSS自定义函数、AST解析工具等额外能力，实现成本较高，对于常规需求来说性价比远低于公共变量对齐方案。

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