SASS中如何合并变量文件与通用模板避免代码重复

开发者阿泽

2026-8-26

SCSS多主题无重复代码实现方案

你只需要把公共样式抽为独立的Sass依赖片段，每个主题入口仅负责加载对应变量和公共片段即可，全程不需要重复编写模板内容。

操作步骤

抽取公共模板片段
新建_template.scss文件，文件名开头的下划线是Sass的固定约定，用来标记这个文件是依赖片段，不会被单独编译成CSS文件。把你写好的公共CSS规则全部放到这个文件里：
```
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: $foreground;
    background-color: $background;
}
```
编写主题入口文件
每个要输出的独立CSS对应一个入口文件，内容只有两行引入语句，按顺序先引当前主题的变量文件，再引公共模板即可，不需要重复写任何样式规则：
- style1.scss：
```
@import 'colors1.scss';
@import 'template.scss';
```
- style2.scss：
```
@import 'colors2.scss';
@import 'template.scss';
```
配置编译规则
配置SCSS编译工具时，只把style1.scss、style2.scss设为编译入口，变量文件、_template.scss会被自动识别为依赖加载，最终输出的两份CSS和你预期的内容完全一致。

原理说明

Sass的@import是按书写顺序解析执行的：先加载主题变量文件时，$background、$foreground会被赋值为当前主题对应的色值，之后加载公共模板时，模板里引用的变量会直接读取当前已赋值的变量内容，最终编译出对应主题的独立CSS。
后续如果要新增主题，只需要新增一份变量文件，再加一个两行引入代码的入口文件就行，不需要改动公共模板，完全没有重复代码。