A FireSASS évekig nagy segítséget nyújtott azoknak a front-end fejlesztőknek, akik a SASS nevű CSS előfeldolgozót használták, viszont aki úgy dönt, hogy újratelepíti a gépét, vagy most szeretné kipróbálni a FireSASS kiegészítőt, meglepve tapasztalhatja, hogy a https://addons.mozilla.org/hu/firefox/addon/firesass-for-firebug/ oldalon egy ilyen üzenetet kap:
"A kiegészítőt a készítője eltávolította."
Tegnap én is így jártam, és úgy gondoltam, hogy megosztom másokkal is tapasztalatomat, hátha megspórol majd egy kis időt magának, aki megtalálja ezt az írást.
Elkezdtem kutatni megoldások után, és hamar találtam egy alternatív kiegészítőt Firecompass néven. Tanulmányoztam a leírásokat a config.rb állomány módosításáról, pl. ezt, és sikerült is működésre bírni (a szükséges kódsorok lejjebb találhatóak), Mike Stewart hozzászólása viszont felkeltette az érdeklődésemet:
"The new practice would be to remove your browser plugins and use --sourcemap in both sass 3.3+ and compass 1.0.1+ -- all major browsers currently have builtin developer tools support for sourcemap files (*.map)!"
A sourcemap használatával már nem csak a Firefoxban lehet scss állományokat debugolni, hanem pl. a Google Chrome-ban is.
Az előző két hivatkozás részletes leírásokhoz vezet, de röviden leírom hogyan megy a sourcemap használata Firefoxban, illetve Chrome-ban.
Firefoxban kattintsunk jobb egérgombbal a debugolni kívánt elemre, és kattintsunk az Elem vizsgálatára (tehát ne az Elem vizsgálata Firebuggal sort válasszuk, hanem a Firefox saját developer eszközét). Keressük meg azt a részt a CSS szabályoknál, amelyikre kíváncsiak vagyunk, kattintsunk jobb egérgombbal, és válasszuk ki az Eredeti források megjelenítése sort. Pár másodperc múlva frissül a developer tool, és már az .scss állomány nevét mutatja.
Chrome-ban nyissuk meg a chrome://flags oldalt, keressük meg "A Fejlesztői eszközök kísérleteinek engedélyezését", és engedélyezzük. Kattintsunk jobb egérgombbal a debugolni kívánt elemre, és kattintsunk az Elem megtekintése sort válasszuk ki. Nyissuk meg a beállításokat (a jobb felső sarokban lévő fogaskerék ikon), és a General résznél pipáljuk be az "Enable CSS source maps" jelölőnégyzetet. Opcionálisan az "Auto-reload generated CSS" jelölőnégyzetet is bepipálhatjuk. Most már a Chrome is az .scss állományunkat mutatja.
A sourcemap használatához viszont legalább 3.3-as sass, és 1.0.1-es compass szükséges, ezért módosítani kell a config.rb állományunkat.
Így pedig egy újabb problémába ütközhetünk, mert ha csapatban fejlesztünk, akkor mindenkinek frissítenie kell a gépén a sass-t és a compass-t. Nem szeretnék nagyon eltérni a tárgytól, de érdemes megemlíteni a Bundlert, ami segít abban, hogy egyik projectnél se legyen eltérés pl. a sass és compass verziókban a csapattagok gépén.
Nézzük akkor a config.rb állományból azokat a sorokat, amik a FireSASS, Firecompass, és sourcemap témát érintik:
# Change this to :production when ready to deploy the CSS to the live server.
environment = :development
#environment = :production
# Enable sourcemaps in development environment.
sourcemap = (environment == :development) ? true : false
# Alternative development debugging methods
#
# If in development (above), we can enable line_comments for FireCompass plugin.
# Requires Firebug plugin and FireCompass plugin
firecompass = false
#firecompass = true
# If in development (above), we can enable debug_info for the FireSass plugin.
# Requires Firebug plugin and Firesass plugin
#firesass = false
firesass = true
# Pass options to sass. For development, we turn on the FireCompass-compatible
# line_comments if the firecompass config variable above is true.
sass_options = (environment == :development && firecompass == true) ? {:line_comments => true} : {}
# Pass options to sass. For development, we turn on the FireSass-compatible
# debug_info if the firesass config variable above is true.
sass_options = (environment == :development && firesass == true) ? {:debug_info => true} : {}
A config.rb módosítása után compass clean (vagy bundle exec compass clean) paranccsal töröljük le a korábbi .css állományainkat, és a compass watch (vagy bundle exec compass watch) paranccsal tovább szerkeszthetjük az .scss állományainkat úgy, hogy most már tudjuk azokat debugolni is böngészőinkben.
A sourcemap használatának előnye a fentiek mellett, hogy vizsgálat közben menteni is tudjuk a módosításainkat az eredeti .scss állományunkba.
Ha valaki mégis ragaszkodik a jól megszokott FireSASS kiegészítőhöz, akkor innen le tudja tölteni, és kézzel telepítheti a leírás szerint.
