web-dev-qa-db-fra.com

Conversion CSS en SASS (ou MOINS)

Quelqu'un peut-il recommander du CSS à moins ou du CSS à des outils de conversion sass? J'en ai trouvé quelques .e.g. http://css2less.cc/ et http://css2sass.herokuapp.com/ mais tout aperçu de leur fiabilité (ou des recommandations d'autres outils) serait grandement apprécié . J'ai une grande base de code CSS pour une solution en marque blanche qui bénéficierait grandement d'avoir un préprocesseur CSS en place, mais ce serait une tâche énorme de convertir manuellement en sass/less.

Merci d'avance

EDIT: Je dois souligner que je suis particulièrement intéressé par les expériences d'utilisation d'un outil (tels que ceux répertoriés ci-dessus (en l'absence de meilleurs)) pour convertir une grande base de code CSS vers l'utilisation d'un préprocesseur CSS tel que SASS ou LESS. Ou si d'autres moyens (autres que les outils répertoriés) pour réaliser un tel exploit sont pragmatiques. Quels obstacles avez-vous dû surmonter? Cela vaut-il même la peine d'essayer? Ou ces métalangages ne conviennent-ils qu'à un nouveau projet où vous pouvez recommencer à zéro?

csssassless
27
rbginge

La bonne chose à propos de SASS est que vous n'avez pas besoin de convertir CSS en SASS, car SASS est une extension de CSS.

Copiez et collez simplement et vous êtes prêt à partir.

Si vous cherchez à refactoriser votre CSS en fichiers SASS bien structurés, c'est quelque chose que je ne pense pas qu'un outil puisse faire.

15
Clark Pan

J'ai fait de bonnes expériences avec http://css2sass.heroku.com/ . Vous pouvez également trouver leur base de code sur github. Vous pouvez également convertir des fichiers directement via l'outil sass-convert qui sera installé par la gemme sass d'origine. Fondamentalement, c'est exactement ce que fait css2sass.

Il suffit d'appeler:

sass-convert -F css -T sass original_file.css converted_file.sass
26
bjunix

Ce message a besoin des 2 outils en ligne suivants répertoriés pour tous les futurs téléspectateurs.

Tout d'abord, je ferais toujours tourner le css via cet outil en ligne pour le convertir en un raccourci css plus propre http://shrthnd.volume7.io/ - aucune explication nécessaire vraiment, le rend tout simplement plus propre et plus petit si vous n'avez pas déjà l'habitude d'écrire votre css de cette façon.

Ensuite, grâce à cet outil en ligne http://sebastianpontow.de/css2compass/ -C'est un très bon outil pour créer des fichiers scss à partir de votre css. Il convertira toutes les couleurs à votre format préféré, définira les variables de couleur et les variables de police et vous donnera globalement une bonne idée des bases de sass simplement en voyant ce qu'il a fait à votre CSS.

La seule chose que j'ai remarquée comme peu souhaitable dans le deuxième outil est qu'il nomme des familles de polices comme celle-ci $font_0: Open Sans; $font_1: Roboto Condensed; $font_2: arial; etc. Je trouve toujours plus intuitif de les nommer sous forme abrégée de la police réelle, ou de configurer 3 à 5 noms liés au contenu, tels que $font_main, $font_sub, $font_callout, $font_titles ou comme vous préférez. Mais c'est un correctif de 30 secondes lorsque vous collez le tout dans votre tout nouveau fichier scss :)

10
Benbodhi

C'est un peu tard, mais récemment j'ai trouvé cet outil de conversion en ligne:

http://css2sass.heroku.com/

Cela m'a aidé bien qu'il rejette parfois des CSS valides

4
Bart Burg

J'ai en fait trouvé quelque chose maintenant: Leafo

Il fait un formatage de base, par exemple:

#header {
/* ... */
}

#header p {
/* ... */
}
to

#header {
/* ... */
p {
/* ... */
}
}

J'espère que cela aide!

Et si vous voulez vérifier ou quoi que ce soit pour voir le sass en CSS, vous pouvez essayer le site Web en ligne sass ... Essayez Sass en ligne

0
Sri

Je dois convertir CSS en SASS ou LESS (cela dépend du projet) assez souvent pour garder mon code propre. Voici l'outil que j'utilise: http://csstoss.com/

Vous pouvez convertir CSS en SASS, SCSS ou LESS en un seul endroit.

J'espère que cela aide!

0
Hieu Nguyen