web-dev-qa-db-ja.com

CSSインテリジェントマージャー

http://www.tothepc.com/archives/combine-merge-multiple-css-files/ に非常によく似たツールを探しています

ただし、次の例を考えます：

test1.css：

#admin {
    background: #c9d2dc;
    border-color: #ccc
}

test2.css：

#admin {
    background: #222;
    border-bottom: 1px solid #444;
    border-left: 1px solid #444;
    padding: 2px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 120px;
    z-index: 2
}

どちらか一方のみを選択できます。私はそれらをマージして、それを作りたい：

#admin {
    background: #c9d2dc;
    border-color: #ccc
    border-bottom: 1px solid #444;
    border-left: 1px solid #444;
    padding: 2px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 120px;
    z-index: 2
}
csstools
2
ParoX

マージツールは、異なるcssファイルで同じid /クラスを見つけたときにオプションを提供する必要がありますが、この場合、それらを一緒にマージすることはできません。例1では、IDが「admin」で、背景が＃222に設定されています。例2では、​​同じIDに＃c952dcとして指定された背景があります。合併では複数の属性をまとめることはできません。cssファイルは有効ではありません。各クラス/ IDは、それらが存在するファイルに関係なく、特定の属性のインスタンスを1つだけ持つ必要があります。

1
SubTypical

編集：私の元のコメントは、これは不可能なタスクではないということでした。しかし実際にはこれは間違っています：単一の要素が複数の方法で参照される可能性があるため、一般的な場合、ファイルを連結するよりも良い方法はありません。検討してください...

<div id="one" class="two">Some text</div>

cSSを使用

#one {color: red; font-weight: 900;}
.two {color: blue;)

.two {font-weight: 500;}
#one {color: green}

これは、最終的に緑のテキスト、ウェイト500になるはずです。マージされた.twoを最初に置くと、グリーン900になり、マージされた#oneを最初に置くと、ブルー500になります。 2つのセレクターが同じ要素を参照していることがわからないため、正しい答えを推測することはできません。

0
Kim SJ