web-dev-qa-db-fra.com

Fusion intelligente CSS

Je cherche un outil très similaire à http://www.tothepc.com/archives/combine-merge-multiple-css-files/

Cependant, étant donné cet exemple:

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
}

Cela vous permettra seulement de sélectionner l'un ou l'autre. Je veux les fusionner, en le faisant:

#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

L'outil de fusion devrait vous donner des options lorsqu'il repère les mêmes identifiants/classes sur différents fichiers CSS, mais dans ce cas, il ne vous permettrait pas de les fusionner ensemble. Dans l'exemple 1, vous avez l'id "admin", avec l'arrière-plan défini sur # 222. Dans l'exemple 2, le même identifiant a un arrière-plan désigné par # c952dc. La fusion ne peut pas mettre plusieurs attributs ensemble, votre fichier css ne serait pas valide. Chaque classe/id, quel que soit le fichier sur lequel ils existent, ne devrait avoir qu'une seule instance d'un attribut particulier.

1
SubTypical

Edit: Mon commentaire original était que ce n’était pas une tâche impossible. mais en réalité, c'est faux: puisqu'un seul élément peut être référencé de plusieurs manières, dans le cas général, on ne peut pas faire mieux que concaténer les fichiers. Considérer...

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

avec CSS

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

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

Cela devrait aboutir au texte vert pesant 500. Si vous mettez un .two fusionné en premier, vous obtenez Green 900, si vous mettez le #one fusionné en premier, vous obtenez Blue 500. Comme vous ne savez pas que les deux sélecteurs se réfèrent au même élément, vous ne pouvez pas déduire la réponse correcte.

0
Kim SJ