超紧凑 css

Question

我想知道是否有任何方法可以通过合并所有相等的属性来压缩 CSS。

示例：

我的 css 文件：

.main{
    border: 3px solid red;
 }

.container .child{
    border: 3px solid red;
    background: blue;
}

element{
   margin: 4px 0px;
}

.xpto > li{
    border: 3px solid red;
    margin: 4px 0px;
    background: red;
}

需要输出：

.main, .container .child, .xpto > li{
    border: 3px solid red;
}
.container .child{
    background: blue;
}
.xpto li, element{
    margin: 4px 0px;
}
.xpto li{
    background: red;
}

有人知道吗？

Answer 1

如果您熟悉 gulp，一个名为 gulp-cssnano 的 gulp 插件将能够按照您在问题中描述的方式缩小 CSS。

了解一下 here。

Answer 2

我知道这不是 100% 的要求——但可以用 SCSS @extend 完成

%back-blue{ background: blue; }
%back-red { background: red; }
%border   { border: 3px solid red; }
%margin   { margin: 4px 0; }

.main { 
  @extend %border; 
}   
.container .child {
  @extend %border;
  @extend %back-blue;
}
element {
  @extend %margin;
}
.xpto > li {
  @extend %border;
  @extend %margin;
  @extend %back-red;
}

输出：

.container .child { background: blue; }
.xpto > li { background: red; }
.main, .container .child, .xpto > li { border: 3px solid red; }
element, .xpto > li { margin: 4px 0; }

超紧凑 css

Ultra compact css

html

css

sass

gruntjs