Редактор на стилове - инструменти за разработчици на Firefox,MDN

Редакторът на стилове ще ви позволи да:

преглеждайте и редактирайте всички стилови таблици на страницата
създайте нови таблици със стилове от нулата и ги приложете към страницата
импортирайте съществуващи таблици със стилове и ги приложете към страницата

Редакторът на стилове е разделен на три основни части:

От Firefox 33 нататък има трети компонент на редактора на стилове: страничната лента на медиите.

Панел със стилови листове

Панелът със стилове вляво изброява всички листове със стилове в текущия документ. Можете бързо да включвате и изключвате стиловете на листа, като щракнете върху иконата на око до него. Можете да запишете всички промени, които правите в листа със стилове, локално, като щракнете върху бутона Запазване в долния десен ъгъл до всеки лист в списъка.

Редакторът на стилове автоматично деминифицира листовете със стилове, които открива, без да засяга оригинала. Което много улеснява работата върху страници, които са оптимизирани.

Редакторът на стилове поддържа автоматично довършване. Просто започнете да пишете и той ще ви предложи списък с предложения.

Можете да активирате автоматичното довършване в настройките на редактора на стилове.

странична лента @media

От Firefox 33 нататък редакторът на стилове показва странична лента от дясната страна, където текущият лист съдържа всякакви @media правила. Страничната лента съдържа списък с правила и връзка към редовете на таблицата, където е дефинирано правилото. Щракнете върху елемента, за да преминете към това правило в работния лист. Състоянието на текста остава сиво, ако медийната заявка не е приложена в момента.

Медийната странична лента работи особено добре с Responsive Design View за създаване и отстраняване на грешки в мобилни оформления:

Създаване и импортиране на стилов лист

Можете да заредите стилов лист от диска и да го приложите към страница, като щракнете върху бутона Импортиране.

Поддръжка на източник на карта

Уеб разработчиците често създават CSS файлове с помощта на препроцесор като Sass, Less или Stylus. Тези инструменти създават CSS файлове с по-богат и по-изразителен синтаксис. Ако направите това, възможността да преглеждате и редактирате генерирания CSS не е толкова полезна, тъй като кодът, който поддържате, е синтаксис на предпроцесор, а не генериращ CSS. Така че ще трябва да промените генерирания CSS, след което да работите ръчно като с оригинала.

Източникът на картата има инструменти, за да накара картата да се върне от получения CSS към оригиналния синтаксис, така че да могат да изобразят и да ви позволят да редактирате файловете в оригиналния синтаксис. От Firefox 29 нататък стиловият редактор може да разбира CSS изходните карти.

За да работи това, трябва:

използвайте CSS препроцесор, който разбира предложението Source Map Revision 3. В момента това означава Sass 3.3.0 или по-нова, или 1.5.0 версия на Less. . Други препроцесори работят активно върху добавянето на поддръжка или я обмислят.
всъщност инструктира препроцесора да генерира изходната карта, например чрез предаване на аргумента --sourcemap на инструмента за команден ред Sass.

Преглед на първичните източници

Редактиране на първоизточници

Първо, настройте препроцесора, така че да следва оригинала и автоматично да възстановява CSS, когато изходният код се промени. Със Sass можете да направите това, като просто подадете тази опция: