Sass启用--style compressed编译后仍有逗号空格，如何解决？

1. 优化函数的字符串拼接逻辑 #

如果你的函数是靠字符串拼接生成阴影值的，直接在拼接时删掉多余空格就行。比如原来的代码可能是这样（带空格拼接）：

@function long-shadow($count) {
  $shadow: '';
  @for $i from 1 through $count {
    $shadow: $shadow + $i + 'px ' + $i + 'px 0 #000, ';
  }
  @return str-slice($shadow, 1, -3);
}

改成不带冗余空格的拼接方式：

@function long-shadow($count) {
  $shadow: '';
  @for $i from 1 through $count {
    $shadow: $shadow + $i + 'px'+$i+'px 0 #000,';
  }
  @return str-slice($shadow, 1, -2); // 只去掉末尾的逗号
}

这样生成的字符串本身就没多余空格，编译后自然不会出现问题。

2. 用Sass原生列表替代字符串拼接 #

别用字符串拼，改用Sass的列表类型存储每个阴影项，最后输出列表就行——Sass的compressed模式会自动处理列表的逗号空格：

@function long-shadow($count) {
  $shadow-list: ();
  @for $i from 1 through $count {
    $shadow-item: $i px $i px 0 #000;
    $shadow-list: append($shadow-list, $shadow-item, 'comma');
  }
  @return $shadow-list;
}

这种方式更符合Sass的语法规范，压缩编译时会自动帮你把逗号前后的空格去掉。

3. 额外用PostCSS二次压缩（备选） #

如果不想改Sass代码，也可以用PostCSS的cssnano或postcss-minify插件对编译后的CSS再做一次压缩，能彻底清理冗余空格。不过这属于额外步骤，不如直接在Sass层面解决高效。

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