Haml and Sass 3.1 are Released
У цэлым, з тых часоў, як Sass кампілюецца ў стандартнай CSS, Firebug маглі добра зладзіцца з ёй. Адна з самых прыемных асаблівасцей Firebug пры выкананні працы CSS складаецца ў магчымасці паказаць вам, дзе ўсе стылі для элементаў вызначаюцца ў CSS.
Пры выкарыстанні Sass, гэта функцыя галоўным чынам не працуе. Яна кажа вам, дзе стыль былі вызначаны ў CSS … што насамрэч не дапаможа вам высвятліць, дзе ён быў у арыгінале Sass.
FireSass
У пятніцу я ўсе гэта так надакучыла, што я вырашыў выправіць гэта раз і назаўжды. Плён маіх высілкаў з’яўляецца пашырэннем FireSass для Firebug. У спалучэнні з новай магчымасцю выйсця ў адладку Сасс, FireSass можа паведаміць карыстачу Sass імя файла і нумар радка для ўсіх стыляў Sass.
З яго дапамогай
Па-першае, паптрэбна ўсталяваць пашырэнне FireSass для сябе, але спачатку пераканаецеся, што вы таксама атрымалі і FireBug усталяваным. Да пашырэння атрымліваецца больш аглядаў і правярак рэдактарамі Mozilla, усе гэта будзе пералічана ў якасці эксперыментальнага. кода, даступнага на GitHub, калі Вы жадаецепераканацца, што ён не злодзей(гэта сапраўды так).
Пасля таго, як пашырэнне ўсталёўвана, вам спатрэбіцца свежая версія развіцця у Sass. Самы просты спосаб атрымаць яе – гэта ўсталяваць Haml edge gem, запусціўшы усталёўку Haml edge gem. Вы таксама можаце ўсталяваць яго ў якасці haml gem, загрузіўшы яго з GitHub і запусціўшы make install у каталозе haml.
Далей, вам трэба наладзіць Sass і сабраць неабходную інфармацыю для адладкі. Гэта як раз дапамагае стварэнню:debug_info варыянта. Калі вы выкарыстоўваеце Sass з вэб framework Ruby, вы, верагодна, жадаеце зрабіць
Sass::Plugin.options[:debug_info] = true
Калі вы выкарыстоўваеце Sass з каманднага радка, проста перайдзіце ў –debug-info сцяг.
Нарэшце, выдаліце ўсе існыя файлы CSS, каб пераканацца, што яны будуць адроджаны, і добрай вам дарогі!
Як гэта працуе
Першапачаткова я дадаў :line_numbers для Sass у надзеі зрабіць убудову, яктыкія, якія маглі б чытаць нумары і імёны, паказваць іх замест звычайных ліній Firebug і іменаў файлавай інфармацыі. Нажаль, высвятлілася, што ў аналізе файла CSS, усё інфармацыю, якая тычыцца каментараў, выкінуць.
Далей, я гуляў з праходзілай у інфармацыю карыстацкіх уласцівасцяў. -sass-line-number і -sass-filename у ўласцівасцях было прыгожае рашэнне, але, нажаль браўзара адкідае ўсе невядомыя ўласцівасці гэтак жа таранна, як робіць заўвагі.
Я рабіў гэта за паўтара гады даапісаных вышэй падзей. Я быў вельмі засмучаны ў сувязі з адсутнасцю падтрымкі Firebug, #Haml на Freenode, пагэтаму я вырашыў яшчэ раз зірнуць на гэту праблему. І я сутыкнуўся з жудаснай, абыходная, але ў выніку функцыянальнай халтурай.
Хітрасць складаецца ў заявах сродкаў масавай інфармацыі. Калі заява для сродкаў масавай інфармацыі невядомага тыпу выкарыстоўваецца, то ўсе правілы гэтай заявы ігнаруюцца, але яны ўсё яшчэ з’яўляецца даступнай праз Javascript. Такім чынам, я сабраў усю адладкавую інфармацыю для кожнага правіла ў заявах сродкаў масавай інфармацыі, накшталт наступнага:
@media -sass-debug-info {... }
Нават пасля гэтага, ёсць яшчэ істотныя складанасці, калі вам цікава, я прапаную вам прачытаць Sass і FireSass код. Вынік, аднак, складаецца ў тым, што дадзеныя ёсць, і FireSass можа іхпрачытаць.
Вядома, дадаўшы дадатковыя @media дэкларацыі для кожнага правіла, вы створыце мноства стыляў. Такім чынам :debug_info аўтаматычна адключаецца пры выкарыстанні :compressed выснова стыляў, якія заўсёды павінны быць уключаны ў вытворчасць.
