Как да започнете да използвате CSS препроцесори
Здравейте всички. Във връзка с най-новите публикации в този блог по темата за CSS препроцесори, реших да дам своите 5 копейки. Надяваме се за всички, които все още не използват този страхотен инструмент, тази публикация ще ви помогне да го поправите.
SCSS, SASS, LESS се различават по синтаксис. Избрах SCSS, тъй като неговият синтаксис е най-близък до родния CSS.
Основните трикове, заради които се влюбих в препроцесорите:
един) Променливи
Създавам отделен файл vars.scss, където определям цвета на текста, връзките, фона и т.н. в променливите. По-късно, ако дизайнерът реши да промени цвета на връзките, трябва да сменя само един ред. И между другото, можете да използвате аритметични операции върху променливи.
2) Вложени класове или наследство
Това е най-якото нещо. Вече не е нужно да пишете конструкции като:
Сега го правя по следния начин:
3) Mixins - потребителски функции
Mixins - от техническа страна - са функции. Номерът е, че можете да зададете параметри за миксина.
Този вид неща помагат много в същия пример със заоблени ъгли. В миксина вземаме предвид всички префикси, а в кода вече закръгляме ъглите с един ред.
Compass е базирана на SASS CSS рамка. Към всички прелести на SCSS той добавя куп готови миксини, помощници и още няколко интересни функции.
Първо, за същите заоблени ъгли или CSS3 свойства, не е нужно да пишете свои собствени комбинации, всичко вече е там и, разбира се, с всички префикси.
На второ място, помощници, които ви позволяват да работите с цвят, изображения и др.
Трето, оформления. Можете да натиснете долния колонтитул в долната част на екрана на един ред, да свържете съответния файл
И компасът също така знае как да събира спрайт от отделни снимки и в същото време създава и специален клас за всяка снимка в спрайта.
Компасът е много интересно нещо и говорих за малка част от всичките му възможности. Прочетете повече в официалната документация. compass-style.org/reference/compass/
И накрая
По-рано имах един, максимум два css файла, където се съхраняват всички стилове. Колкото по-голям беше проектът, толкова по-трудно беше да се работи със стилове. Сега имам отделен файл за всеки логически блок (меню, долен колонтитул, заглавка и т.н.), който след това се компилира с останалите в един общ.