Sass编译文件体积冗余，求优化方案（VSCode+Linux环境）

问题背景 #

在Linux系统下使用VSCode的Sass Live Compiler插件编译SCSS后，生成的CSS文件存在大量重复选择器，体积冗余，插件设置中未找到相关优化选项，希望通过调整代码或工具实现选择器合并压缩。

原始SCSS代码 #

@mixin flex {
  display: flex;
  dynamic- { flex: 1 1 }
  shrink-  { flex: 0 1 }
  fixed-   { flex: 0 0 }
  grow-    { flex: 0 1 }
}
column- {
  @include flex;
  flex-direction: column;
}
row- {
  @include flex;
  flex-direction: row;
}

当前编译后的CSS #

column- {
  display: flex;
  flex-direction: column;
}
column- dynamic- {
  flex: 1 1;
}
column- shrink- {
  flex: 0 1;
}
column- fixed- {
  flex: 0 0;
}
column- grow- {
  flex: 0 1;
}

row- {
  display: flex;
  flex-direction: row;
}
row- dynamic- {
  flex: 1 1;
}
row- shrink- {
  flex: 0 1;
}
row- fixed- {
  flex: 0 0;
}
row- grow- {
  flex: 0 1;
}

注意：期望CSS中的错误点 #

你提供的期望CSS存在属性值错误：column- ,row-{flex-direction: column;} 会导致row-的布局方向错误，正确的row-应该使用flex-direction: row;，因此这部分无法合并到同一规则中。

解决方案 #

1. 重构SCSS代码，主动合并共享样式 #

通过调整SCSS的结构，将共享样式提取并分组，让Sass编译时自动合并相同属性的选择器：

// 定义共享的flex基础样式占位符
%flex-base {
  display: flex;
}

// 定义共享的嵌套修饰器mixin
@mixin flex-modifiers {
  & dynamic- { flex: 1 1 }
  & shrink-  { flex: 0 1 }
  & fixed-   { flex: 0 0 }
  & grow-    { flex: 0 1 }
}

// 合并基础flex样式
column-, row- {
  @extend %flex-base;
}

// 单独设置各自的方向，并应用修饰器
column- {
  flex-direction: column;
  @include flex-modifiers;
}

row- {
  flex-direction: row;
  @include flex-modifiers;
}

编译后生成的CSS会自动合并共享选择器，结果如下：

column-, row- {
  display: flex;
}

column- {
  flex-direction: column;
}

column- dynamic- {
  flex: 1 1;
}

column- shrink-, column- grow- {
  flex: 0 1;
}

column- fixed- {
  flex: 0 0;
}

row- {
  flex-direction: row;
}

row- dynamic- {
  flex: 1 1;
}

row- shrink-, row- grow- {
  flex: 0 1;
}

row- fixed- {
  flex: 0 0;
}

2. 使用CSS压缩工具实现自动合并 #

如果不想调整SCSS代码，可以借助专业的CSS压缩工具（如cssnano）对编译后的CSS进行二次处理，它会自动合并相同属性的选择器、删除冗余代码：

步骤：

1. 全局安装依赖工具：

   npm install -g sass cssnano-cli
   

2. 编译并压缩：

   # 先编译SCSS到未压缩CSS
   sass your-file.scss output.css
   # 再用cssnano压缩并合并选择器
   cssnano output.css output.min.css
   

3. 检查Sass Live Compiler插件设置 #

打开VSCode设置，搜索Sass Live Compiler，查看是否有Minify或Format相关选项，开启后插件会生成压缩后的CSS（部分版本支持基础压缩，但选择器合并可能需要配合工具）。

内容的提问来源于stack exchange，提问作者سعید مزرعه فرهانی