Адным з найболей распаўсюджаных праблем юзабіліті людзі з Sass з'яўляецца інтэграцыя з існымі прыладамі. У прыватнасці, шматлікія людзі (уключаючы мяне) выкарыстоўваць Firebug, і жадаю ёй гулялі лепш з Sass.

У цэлым, пасля Sass кампілюецца ў стандартнай CSS, Firebug маглі зладзіцца з ёй добра. Адзін з самых прыемных асаблівасцяў Firebug пры выкананні працы CSS, аднак, складаецца ў магчымасці паказаць вам, дзе ўсе стылі для элементаў вызначаюцца ў CSS.

Пры выкарыстанні Sass, гэта функцыя галоўным чынам не працуе. Яна кажа вам, дзе стыль быў вызначаны ў CSS ... які насамрэч не дапаможа вам высвятліць, дзе ён быў у арыгінале Sass.

FireSass

У пятніцу я стаў надакучылі з гэтым і вырашыў гэта выправіць раз і назаўжды. Плён маіх высілкаў з'яўляецца пашырэнне FireSass для Firebug. У спалучэнні з новай магчымасцю выйсця адладку Сасс, FireSass можа паведаміць карыстачу Sass імя файла і нумар радка для ўсіх стыляў Sass.

З яго дапамогай

Па-першае, усталяваць пашырэнне FireSass сябе, і пераканаецеся, што вы атрымалі FireBug усталяваны таксама. Да пашырэння атрымлівае больш аглядаў і правярацца рэдактарамі Mozilla, гэта будзе пералічаныя ў якасці эксперыментальных. кода, даступных на GitHub, калі Вы жадаеце, каб пераканацца, што ён не злой (гэта няма).

Пасля пашырэння ўсталёўвала, вам спатрэбіцца свежая версія развіцця у Sass. Самы просты спосаб атрымаць гэта ўсталяваць Haml краі самацвет, запусціўшы усталёўку Haml жамчужынай краю.Вы таксама можаце ўсталяваць яго ў якасці haml каштоўны камень у загрузіўшы яго з GitHub і запусціце rake install у haml каталога.

Далей, вам трэба наладзіць Sass сабраць неабходную інфармацыю адладкі. Гэта як раз мяркуе стварэнне :debug_info варыянт. Калі вы выкарыстоўваеце Sass з вэб фреймворк 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 выснова стыль, які заўсёды павінен быць уключаны ў вытворчасці