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

2 个答案: