web-dev-qa-db-fra.com

Débogage Less / Sass dans Chrome Dev Tools / Firebug

Comment faites-vous la maintenance des CSS construits avec Less/Sass?

L'une des choses que j'aime dans Dev Tools/Firebug est la possibilité de voir le numéro de ligne d'un style CSS. Existe-t-il un bon moyen de le faire avec des préprocesseurs CSS autres que d'avoir à rechercher manuellement dans le fichier .less/.scss pour trouver le code que je souhaite modifier?

csssasslesssource-maps
59
Dave Stibrany

Les outils de développement Chrome prennent désormais en charge le débogage Sass prêt à l'emploi.

Mise à jour pour inclure les cartes sources:
Les versions précédentes utilisaient des commentaires en ligne dans votre CSS pour fournir une référence au code source (voir ci-dessous comment faire). les versions récentes de sass (3.3+) et chrome (31+) utilisent des cartes sources pour cela:

  1. Assurez-vous d'avoir Sass 3.3.x
  2. Compilez votre Sass avec le --sourcemap drapeau.
  3. Dans Chrome/ium DevTools, ouvrez les paramètres et cliquez sur Général.
  4. Activez "Activer les cartes sources CSS".

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

Versions antérieures:
1. Tout d'abord, vous devez compiler votre Sass avec --debug-info allumé.
2. Dans Chrome/ium, allez à propos de: flags
3. Activer les tests des outils de développement
4. Dans votre inspecteur (F12), ouvrez "Paramètres", puis allez dans l'onglet "Expériences" et cochez "Prise en charge de SASS".

33
tsi

Si vous faites un choix quant à ce que vous devez utiliser, cet article sur css-tricks pourrait vous intéresser.

J'ai appris que l'utilisation de LESS ou SASS a plus d'avantages que d'inconvénients. Bien que ce soit certainement un inconvénient, je ne peux que vous suggérer de bien structurer vos fichiers afin que tous les styles que vous recherchez soient facilement trouvés en utilisant d'autres références, voici quelques choses que vous pouvez faire:

  • Documentez les zones de votre feuille de style; c'est à dire /* General */, /* Header */ et /* Footer */
  • Utilisez des noms logiques et sensés pour les classes que vous pouvez reconnaître rapidement (et ne les numérotez pas comme error1-error10 ou quelque chose)
  • Apprenez à disséquer les sélecteurs de classe/élément/id et pensez à comment/où vous les auriez écrits.
  • Utilisation CTRL+F, souvent l'attribut précis ou à proximité se trouve assez facilement de 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 l'inspecteur Firebug. Pour l'utiliser, installez l'extension et activez les indicateurs de débogage respectifs.

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

Edit: à partir du 2014-07-06, ce plugin n'est plus disponible au téléchargement. FireSass n'est plus disponible.

Les versions Chrome/Webkit ont fait leur apparition sur le net et il existe une fonctionnalité bêta dans chrome pour ajouter la prise en charge du débogage SASS. Elle est basée sur les mêmes informations de débogage utilisées dans la version firefox. été en mesure de juger correctement l'un d'entre eux pour l'instant, ni trouvé quelque chose qui est publiquement accepté comme étant le plugin pour le travail au moment de la rédaction de cet article.

[~ # ~] moins [~ # ~] / [~ # ~] stylet [~ # ~]

Comme ce Tweet @jaketrent pointe vers l'explication, il y a des progrès sur le côté débogage en chrome, mais rien n'a encore été cuit et étant donné l'état du moins de github, cela peut prendre un certain temps ... Les deux solutions sont basés sur la fonctionnalité bêta pour la prise en charge du débogage SASS dans Chrome, ajoutant essentiellement les mêmes informations de débogage que SASS.

28
sg3s

Quelques conseils:

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

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

De cette façon, vous ne devez conserver qu'une seule couleur. Et le reste sera recalculé.

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

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

Dans votre commande sass --watch, Ajoutez un -g Pour --debug-info Afin qu'il produise les hooks nécessaires à l'exécution du plugin.

1
Benxamin

Je suis passé de moins à sass, à cause du fireiresass. Avec cela, vous obtenez la ligne sass d'origine dans Firebug.

installer firesass si vous utilisez sass

1
yvess

J'ai rarement des problèmes de maintenance/débogage en MOINS - nous compilons toujours du côté serveur et référençons uniquement le fichier CSS dans la page HTML. Cela fait qu'il y a toujours une correspondance biunivoque avec la page Web et un fichier sur le disque.

Et puis quand je dois éditer le fichier LESS, je trouve que LESS, étant donné son balisage CSS + supplémentaire, il est assez facile de retracer tout ce qui me dérange vers l'instruction d'origine en CSS. Si c'est un mixin, c'est assez évident (puisque j'utilise habituellement des mixins pour éviter d'avoir à répéter toutes les choses avec le préfixe du fournisseur), et alors c'est juste une hiérarchie logique puisque nous utilisons la fonction d'imbrication de classe, donc trouver:

div#awesome aside ul

est aussi simple que de trouver:

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

(même si nous essayons de ne pas aller plus de 3 couches en profondeur)

Je n'ai pas vraiment d'expérience avec SASS mais je n'aimais pas à quel point il était éloigné du CSS quand je l'ai regardé pour la première fois il y a quelques années (et je n'y suis pas retourné depuis ...)

1
tkone