Quelqu'un connais un bon moyen de convertir de MOINS de Sass?

Question

Cela ressemble fort à de moins en MOINS a tout l'élan pour le moment, mais nous constatons que certains ennuyeux problèmes avec MOINS de navigateur compilateur (qui nous aime utiliser au cours du développement, car elle signifie que nous n'avons pas de processus de construction) et se demandaient si Sass qui pourrait fonctionner mieux. La solution la plus évidente:

http://nex-3.com/posts/100-convert-less-to-scss

ne prend plus en charge MOINS de Sass de conversion (!) ce qui est décevant. Si quelqu'un a quelques idées dans la conversion de MOINS de Sass, le débogage/profilage MOINS de compilation, ou une autre approche pour le problème que j'aimerais savoir.

(Cette question a été invité par un brusque ralentissement dans notre navigateur moins de compilation à partir imperceptible à plusieurs secondes.)

Answer 1

Dans un éditeur de texte qui prend en charge expression régulière rechercher et remplacer, rechercher/remplacer ces valeurs:

1. remplacez @ $

   Trouver: @(?!font-face|import|media|keyframes|-)

   Remplacer: $

2. remplacer mixin

   Trouver: \.([\w\-]*)\s*\((.*)\)\s*\{

   Remplacer: @mixin \1\(\2\)\n{

3. remplacer inclut

   Trouver: \.([\w\-]*\(.*\)\s*;)

   Remplacer: @include \1

4. remplacer les littéraux de chaîne

   Trouver: ~"(.*)"

   Remplacer: #{"\1"}

5. remplacer tourner pour régler la teinte (du nom de la fonction diff)

   Trouver: spin

   Remplacer: adjust-hue

Ceux-ci sont les principaux. Après cela, il ne devrait prendre que quelques minutes pour déboguer le reste.

Answer 2

Sur la construction de MOINS de

Vous pouvez utiliser grunt pour compiler le MOINS, grunt-regarde vous pouvez écouter les changements et de les compiler à chaque fois que vous modifiez un fichier. Ce sera comme vous n'avez pas de processus de construction, et vous pouvez même en faire recharger la fenêtre du navigateur aussi! Cela permettra également de travailler avec Boussole pour SASS, j'aime beaucoup celui-ci car il peut générer des sprites d'images ect!

Sur la conversion de

Je ne sais pas quelle taille de votre base de code, mais je ne pouvais pas trouver tous les outils pour la conversion. Toutefois, la syntaxe est très similaire, vous pourriez faire une recherche rapide et remplacer pour convertir des variables comme l' @color: #4D926F; de $color: #4D926F;.

Il aurait besoin d'un certain temps, mais pas autant que vous pourriez chose.

Answer 3

Pour mon projet j'ai utilisé ce remplacer regex (à l'intérieur de VIM de l'éditeur)

Inclure mixin: (exécutée dans mon application.moins fichier)

%s/\.\([a-z0-9-]\+\)(/@include \1(/gc

Faire mixin: (exécutée dans mon mixin.moins fichier)

%s/\.\([a-z0-9-]\+\) {/@mixin \1 {/gc

Variables: (après un changement de mixin seules les variables commence par $)

%s/@/$/gc

Aussi une erreur de fixation est nécessaire mais au bout de 10-15 minutes tout fonctionne bien.

Vous devriez probablement changer [a-z0-9-] dans les commandes ci-dessus pour inclure également les majuscules, mais comme vous pouvez le voir de moins en MOINS->SASS conversion est possible et pas si difficile que ça.

Answer 4

La conversion ne sera jamais fiable. Mon approche consiste à compiler le .moins de fichiers comme d'habitude - mais dans une .scss fichier (littéralement juste modifier le fichier cible de xxxx.css à xxxx.scss) et il suffit de @import .scss dans votre "bon" .scss fichier. L'utilisation de cette approche signifie que si l' .moins vous auriez autrement convertir des changements (c'est à dire l'auteur des mises à jour), il n'a pas d'importance un peu :)

Évidemment, si vous travaillez sur un .moins de projet et vous avez été regroupées avec celles de .scss fichiers vous pouvez utiliser la même approche, mais dans l'autre sens.