SASSミニファイアは重複したスタイルを削除できますか？

Question

私はcssルールがかなり複雑であることを知っています。しかし、次のCSSは、オプティマイザによってさまざまな方法でかなり簡単に減らすことができませんでしたか？もしそうなら、レール・サスの宝石にそのオプションがありますか？

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
} 

span { 
    background: green; 
    color: inherit; 
} 

.test2 { 
    background: inherit !important; 
    color: inherit; 
    color: inherit; 
    color: inherit; 
} 

追加コンテキスト：

明確に支援するため、私は同様に、次の...

出典提案する：

span { 
    background: red; 
} 
span { 
    background: orange; 
    color: green; 
} 
span { 
    background: yellow; 
} 
span { 
    background: blue; 
    color: green; 
} 

を、私はコンパイラを望みます以下を生成する：

span { 
    background: blue; 
    color: green; 
} 

冗長スタイルがあることは知っていますが、これはスタイルシートを頻繁に改訂するときに何度も起こり、デッドコードを除去したいのです。

Answer 1

ない私の知っていること、SASSだけWhymarrhさんのコメントを拡張しますhttp://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

のためにそれを最適化し、異なるコードをフォーマットしませんが、CSSTidyは、コマンドラインのビルドプロセスに統合することができ、ユーティリティまたは類似しています

sass --watch screen.sass --style compressed 

： http://packages.ubuntu.com/hardy/csstidy

Answer 2

は常にたとえば、あなたの称賛ライン

に '--style圧縮' オプションを使用してコードを最適化するには

SASSはあなたの人生を楽にしますが、現在の状態ではルビーコードを書くことができない限り完璧な最適化を行うことはできません。あなたの例では扱いにくいかもしれないいくつかの回避策がありますが、時間を節約し、自分で入力する必要はありません。 （また、除去されなければならないスペースを）あなたは、おそらく使用して、コードを最適化することができ、たとえば

これらのアプローチ：

span, .test2 { 
    background: red; 
    color: green; 
} 

の代わりに、純粋なCSSで

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
} 

それはと互換性がありますので、新しいSASS構文 をSASSに入れてください：

%theme-red-green { // i couldn't came up with better naming :) 
    background: red; 
    color: red; 
} 

span { 
    @extend %theme-red-green 
} 
.test2 { 
    @extend %theme-red-green 
} 

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
} 

はあなたが気づいています。同じ属性と値を繰り返し

span, .test2 { 
    background: red; 
    color: green; 
} 

及びません：我々はそれが最適化されたコードを生成するあなたの平野CSSにあなたが希望のようにカンマで区切られたスタイルを使用しなかった場合でも、

私は、 '.theme-'の代わりに '％theme-'を使用しました。これはあなたの出力を変えます。クラスセレクタが出力ファイルに含まれます

'継承'値を持つ2つの不要な '色'プロパティは、圧縮モードでも削除されません。

Answer 3

は私が少なくともCSSとSASS /少ないテンプレートの両方に重複したスタイルを見つける方法を発見したことを考える：

オープンソースcsscss宝石をhttp://zmoazeni.github.io/csscss/

それを検出することができるように思われます私はブートストラップの宝石のCSSの周りにサルのパッチを私のCSSの資産と同じフォルダにないことがありますが、重複しています。 、あなたが実行することができますドキュメントから

：

$ csscss -v path/to/styles.css 

または

$ csscss -v path/to/styles.css.scss