求Sass/NPM等工具实现非简写CSS属性转简写方案

当然有办法实现这个需求！下面给你几个实用的工具方案，既能让你在Sass源码里写清晰的全量非简写属性，又能在最终输出的CSS里自动合并成简写形式，同时支持padding、background、border等多种属性：

1. PostCSS + postcss-merge-longhand（推荐） #

这是最直接的解决方案，postcss-merge-longhand是一款专门的PostCSS插件，它会自动检测并合并分散的长格式CSS属性为简写形式，完美匹配你的需求。

步骤： #

• 首先安装依赖：

  npm install postcss postcss-merge-longhand --save-dev
  

• 创建PostCSS配置文件 postcss.config.js：

  module.exports = {
    plugins: [
      require('postcss-merge-longhand')
    ]
  }
  

• 结合Sass编译流程：
  你可以在package.json中添加编译脚本，先编译Sass，再用PostCSS处理输出的CSS：

  {
    "scripts": {
      "build:css": "sass src/styles.scss dist/styles.tmp.css && postcss dist/styles.tmp.css -o dist/styles.css && rm dist/styles.tmp.css"
    }
  }
  

效果示例： #

在你的Sass文件中编写：

.card {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  
  background-color: #f5f5f5;
  background-image: url('card-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  
  border-width: 1px;
  border-style: solid;
  border-color: #ddd;
}

最终输出的CSS会自动合并为：

.card {
  padding: 10px 20px;
  background: #f5f5f5 url(card-bg.png) center no-repeat;
  border: 1px solid #ddd;
}

这个插件还支持margin、border-radius、outline等十几种常用属性的合并，并且会智能判断属性值是否适合合并（比如如果四个方向的padding值完全不同，就会合并成完整的四值简写；如果上下、左右值相同，就会合并成双值简写）。

2. Sass混合宏（Mixin）封装（备选） #

如果你想在Sass层面强制规范写法，也可以自己编写Mixin，通过传入参数的方式生成全量属性和简写属性，但注意这种方式需要你主动调用Mixin，而不是直接写原生属性：

@mixin padding($top, $right, $bottom, $left) {
  // 源码层面保留全量属性（可选，如果你不需要在源码里看到可以删掉）
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
  // 输出简写属性
  padding: $top $right $bottom $left;
}

// 使用方式
.card {
  @include padding(10px, 20px, 10px, 20px);
}

不过这种方式的缺点是：如果直接写原生的非简写属性，无法自动合并，必须通过Mixin调用，灵活性不如PostCSS方案。

总结 #

优先推荐PostCSS的方案，它完全不需要改变你现有的Sass编写习惯，只需要在编译流程中增加一步PostCSS处理，就能自动完成属性合并，同时最大化减少最终CSS的体积。

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