Less/Sass de débogage dans le navigateur Chrome Dev Tools/Firebug

Question

Comment faites-vous pour faire de la maintenance sur CSS construit avec Less/Sass?

Une des choses que j'aime au sujet de Outils de Dev/Firebug est la capacité de voir le numéro de la ligne de css style. Est-il un bon moyen de le faire avec les préprocesseurs CSS d'autres que d'avoir à rechercher manuellement dans la .moins/.scss fichier pour trouver le code je veux modifier?

Answer 1

Outils de développement Chrome prend désormais en charge le Sass de débogage out-of-the-box.

Mis à jour pour inclure la source de cartes:
Les versions précédentes utilisé en ligne de commentaire dans votre css pour fournir une refernce pour le code source (voir ci-dessous comment faire). les versions récentes de sass (3.3+) et de chrome (31+) utiliser des cartes pour que:

1. Assurez-vous que vous avez Sass 3.3.x
2. Compiler votre Sass avec l' --sourcemap drapeau.
3. Dans Chrome/ium DevTools ouvrir les paramètres et cliquez sur général.
4. Activez l'option "Activer la source CSS cartes".

Plus d'infos sont disponibles sur le Chrome dev tools blog: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

Anciennes versions:
1. Tout d'abord, vous devez compiler votre Sass avec --debug-info activé.
2. Dans Chrome/ium aller sur:drapeaux
3. Activer les Outils de développement des expériences
4. Dans votre inspecteur (F12), ouvrez "Paramètres", puis sélectionnez "Expériences" de l'onglet et cochez la case "Soutien pour SASS".

Answer 2

Si vous faites un choix dont vous devriez utiliser, cet article sur css-tricks pourraient être d'intérêt pour vous.

J'ai fait l'expérience que, en utilisant plus ou SASS a plus d'avantages que d'inconvénients. Mais c'est certainement un inconvénient, je ne peux que suggérer que la structure de vos fichiers ainsi donc, tous les styles que vous cherchez se trouvent facilement à l'aide d'autres références, voici quelques choses que vous pouvez faire:

• Document de zones de votre feuille de style; c-à - /* General */, /* Header */ et /* Footer */
• Utiliser la logique et rationnel noms de classes, vous pouvez reconnaître rapidement (et ne pas les compter comme error1-error10 ou quelque chose)
• Apprendre à disséquer la classe/élément/sélecteurs d'id et de réfléchir à comment/où vous les avez écrites.
• Utilisez CTRL+F, souvent précis de l'attribut ou d'un proche, il est assez facilement trouvé cette façon

SASS

Il existe désormais un moyen de déboguer SASS dans firefox en utilisant une extension qui lit et affiche les fichiers sass dans firebug l'inspecteur. Pour l'utiliser, installer l'extension et de permettre à l'respectives indicateurs de débogage.

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

Edit: comme de 2014-07-06, ce plugin n'est plus disponible pour le téléchargement. FireSass a été abandonné.

Chrome/Webkit versions ont été popping up sur le net et il y a une version bêta de chrome pour ajouter le support pour le SASS de débogage. Il est basé sur les mêmes informations de débogage utilisés dans la version de firefox. N'ont pas été en mesure de juger l'un d'eux correctement, ni trouvé quelque chose qui est publiquement reconnue comme étant le plugin pour l'emploi de cette écriture.

MOINS / STYLET

Comme ce tweet @jaketrent points à l'explique, il y a des progrès sur le côté de débogage dans le navigateur chrome, mais rien ne cuit pas encore, et compte tenu de l'état de la MOINS github, il peut encore prendre un certain temps... les Deux solutions sont basées sur la version bêta pour le SASS support de débogage dans le navigateur chrome, essentiellement en ajoutant les mêmes informations de débogage SASS.

• https://github.com/cloudhead/less.js/pull/1038
• https://github.com/LearnBoost/stylus/pull/886

Answer 3

J'ai rarement des problèmes de maintenance/dépannage en MOINS, nous avons toujours compiler sur la fin de serveur et de référence seulement le fichier CSS dans la page HTML. Ce qui le rend si il y a toujours un one-to-one correspondance avec la page web et d'un fichier sur le disque.

Et puis quand j'ai modifier le MOINS, je trouve que MOINS, depuis à peu près CSS+extra balisage, il est assez facile de trace de rien, je suis confus au sujet de l'origine de l'énoncé dans le CSS. Si c'est un mixin, il est assez évident (car j'ai l'habitude d'utiliser mixin pour éviter d'avoir à faire tout le vendeur préfixe des trucs à plusieurs reprises), et puis c'est juste une hiérarchie logique puisque nous utilisons la classe de fonction d'imbrication, de sorte à trouver:

div#awesome aside ul

est aussi facile que de trouver:

div#awesome{
    aside{
        ul{
            padding: 0;
        }
    }
}

(bien que nous essayons de ne pas aller plus de 3 couches de profondeur)

Je n'ai pas de réelle expérience avec SASS, mais je n'aimais pas comment loin de la CSS, c'était quand j'ai regardé il y a quelques années (et je n'ai pas eu de retour depuis...)

Answer 4

Quelques conseils:

• Inclure à la fois les .sass et le .les fichiers css dans le contrôle de version. De cette façon, tout le monde a le plus de changements en cours.
• Si vous organisez vos feuilles de style en zones logiques, l'entretien est un jeu d'enfant.
• Aussi: essayez d'utiliser moins de trois couleurs principales, et ensuite utiliser SASS fonctions des couleurs pour modifier et enregistrer les résultats dans des variables que vous pouvez réutiliser tout au long de votre thème de conception.

Ex: $chartreuse: #7fff00 $olive: darken($chartreuse, 32%)

De cette façon, vous n'avez qu'à maintenir une couleur. Et le reste sera recalculé.

---

Jusqu'à récemment, il n'y avait pas de navigateur SASS des outils de débogage.

Il y a maintenant un plugin Firefox appelé FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)

Dans votre sass --watch de la commande, ajouter un -g pour --debug-info , de sorte qu'il sera de sortie les crochets nécessaires pour le plugin pour fonctionner.

Answer 5

Je suis passé de moins de sass, en raison de firesass. Avec cela, vous obtenez de l'original sass ligne dans firebug.

installer firesass si vous utilisez sass