超緊湊的css

我想知道是否有任何方法通過合併所有相同的屬性來壓縮CSS。超緊湊的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; 
}

有誰知道什麼辦法？

來源

2017-03-10 Eric Domingos

要麼你把它寫像通緝輸出開始，或者你使用某種類型的LESS，SASS，CSS編譯器，其變量爲 – junkfoodjunkie

我懷疑這樣做甚至會有意義 - 我敢打賭，在很多地方都會遇到麻煩，因爲它們對於規則排序有着同等的特異性。 – CBroe

我同意@junkfoodjunkie。你也應該考慮到你將遇到一個討厭的反模式，並且當你需要做某種維護時可能會討厭自己。在所有的現實中，gzip你的項目將產生理想的結果，因爲gzip尋找重複。意思是，你的第一個例子實際上比你需要的輸出要好。 – BuddhistBeast

我知道這是不是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; }

來源

2017-03-12 20:31:52

** Tks Jakob。** 我在想同一條路。這不會是最漂亮的解決方案，但我希望生產環境能夠像這樣。 –

如果您熟悉gulp，那麼稱爲gulp-cssnano的gulp插件將能夠按照您在問題中描述的方式縮小您的CSS。

閱讀關於它here。

來源

2017-03-11 09:47:51 AdamMcquiff

回答

相關問題