Debug less/Sass in Chrome Dev Tools/Firebug

Question

Come si fa a fare manutenzione su CSS creati con Less/Sass?

Una delle cose che mi piace di Dev Tools/Firebug è la possibilità di vedere il numero di linea di uno stile css. C'è un buon modo per farlo con i preprocessori CSS oltre a dover cercare manualmente nel file .less/.scss per trovare il codice che voglio modificare?

Answer 1

Chrome Developer Tools ora supporta il debugging Sass out-of-the-box.

aggiornato per includere le mappe di origine:
versioni precedenti utilizzate commento in linea nel CSS per fornire un riferimento e al codice sorgente (vedi sotto come fare). recenti versioni di sass (3.3+) e cromo (31+) utilizzano le mappe di origine per questo:

1. Accertarsi che siano presenti Sass 3.3.x
2. compilare il Sass con la bandiera --sourcemap.
3. In Chrome/ium DevTools, aprire le impostazioni e fare clic su Generale.
4. Attivare "Abilita mappe sorgente CSS".

Maggiori informazioni sono disponibili sul Chrome strumenti dev blog: https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

Vecchie versioni:
1. In primo luogo, si dovrebbe compila il Sass con --debug-info acceso.
2. In Chrome/ium andare a about: flags
3. Attivare strumenti di sviluppo esperimenti
4. Nel vostro ispettore (F12), aprire "Impostazioni", quindi andare alla sezione "esperimenti" scheda e controllare "Supporto per SASS ".

Answer 2

Se si sta facendo una scelta su quale si dovrebbe usare, this article on css-tricks potrebbe essere di vostro interesse.

Sono venuto a sperimentare che l'utilizzo di LESS o SASS ha più vantaggi che svantaggi. Anche se questo è certamente uno svantaggio Posso solo suggerire di strutturare i file e così tutti gli stili che cercate si trovano facilmente con altri riferimenti, qui ci sono alcune cose che puoi fare:

• aree documento del foglio di stile; cioè /* General */, /* Header */ e /* Footer */
• Utilizzare nomi logici e ragionevoli per le classi è possibile riconoscere rapidamente (e non li numero come errori1-error10 o qualcosa)
• Imparare a sezionare i classe/elemento/selettori id e pensare come/dove li avresti scritti
• Usa CTRL + F, spesso l'attributo preciso o uno vicino è abbastanza facilmente reperibile in questo modo

SASS

V'è ora un modo per eseguire il debug SASS in Firefox utilizzando un'estensione che legge e visualizza i file sass nell'ispettore firebug. Per utilizzare, installare l'estensione e abilitare i rispettivi flag di debug.

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

Edit: come del 2014/07/06, questo plugin non è più disponibile per il download. FireSass has been discontinued.

Le versioni di Chrome/Webkit stanno spuntando in rete e c'è una funzione beta in chrome per aggiungere il supporto per il debug di SASS. Si basa sulle stesse informazioni di debug utilizzate nella versione firefox. Non sono ancora riuscito a giudicare correttamente nessuno di loro, né ho trovato qualcosa che è pubblicamente accettato come plug-in per il lavoro al momento in cui scrivo.

MENO/STYLUS

Come this tweet punti @jaketrent al spiega, non v'è progresso sul lato debug in cromo, ma nulla di cotto in ancora e dato lo stato del GitHub meno si potrebbe ancora prendere un po '... Entrambe le soluzioni si basano sulla funzione beta per il supporto per il debug di SASS in Chrome, in pratica aggiungendo le stesse informazioni di debug di SASS.

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

Answer 3

raramente ho problemi con la manutenzione/debugging in meno - abbiamo sempre compiliamo sul lato server e di riferimento solo il file CSS nella pagina HTML. Questo lo rende così c'è sempre una corrispondenza uno-a-uno con la pagina web e un file su disco.

E poi quando devo modificare il file LESS, trovo che MENO, dal momento che è praticamente un codice aggiuntivo CSS + extra, è abbastanza facile eseguire il backtrace di tutto ciò che mi confonde con l'istruzione di origine in CSS. Se si tratta di un mixin, è piuttosto ovvio (dato che di solito uso i mixin per evitare di dover fare tutte le cose del prefisso del venditore ripetutamente), e quindi è solo una gerarchia logica poiché utilizziamo la funzione di nidificazione delle classi, quindi trovare:

div#awesome aside ul

è facile come trovare:

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

(anche se cerchiamo di non andare più di 3 strati profondi)

non ho esperienza reale con SASS, ma non mi è piaciuto quanto lontani da CSS è stato quando firs t guardato un paio di anni fa (e non sono state da allora ...)

Answer 4

Alcuni consigli:

• includere sia l'.sass ei file css di controllo della versione. In questo modo ognuno ha i cambiamenti più recenti.
• Se si organizzano i fogli di stile in aree logiche, la manutenzione è un gioco da ragazzi.
• Inoltre, provare a utilizzare meno di tre colori principali e quindi utilizzare le funzioni di colore SASS per modificarli e memorizzare i risultati in variabili che è possibile riutilizzare in tutto il progetto/tema.

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

questo modo, si hanno solo per mantenere un colore. E il resto verrà ricalcolato.

---

Fino a poco tempo fa, non c'erano strumenti di debug SASS nel browser.

ora c'è un plugin per Firefox chiamato FireSASS (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/)

nel comando sass --watch, aggiungere un -g per --debug-info in modo che generi i ganci necessari per l'esecuzione del plug-in.

Answer 5

Sono passato da meno a sass, a causa di firesass. Con questo si ottiene la linea sass originale in firebug.

installare firesass se si utilizza sass