Съвременен CSS с Sass - практически урок

Чрез предварителни CSS обработващи програми CSS може значително по-ефективно да се пише. Какви са тези предварителни програми, кои съществуват и защо изборът в тази поредица падна на Sass, показва това видео.

След като се инсталира Sass, трябва първо да инсталирате Ruby. Howто- или инсталирането на Ruby и Sass се показва в това видео. След това може да проверите дали Sass е била успешно инсталирана.

Селекторите трябва да бъдат преобразувани в CSS файлове, за да бъдат наистина използваеми. Благодарение на командата Watch можете лесно да откриете промени в отделни файлове или в цели директории.

Чрез @import могат да се импортират и обединяват SCSS файлове. Какво има всичко това общо с подчертаването преди името на файла, е един аспект на това видео.

В Sass има възможност за деклариране на променливи. Този концепт, както известно, не е наличен в обикновения CSS, но в Sass е гениално средство за ефективно развитие на стилове.

Благодарение на гнезденето, синтаксисът на Sass може значително да бъде по-кратък, отколкото е обичайното в CSS. Вграждането също така ви помага да пишете кода си много по-прегледно.

Използването на @extend ви позволява да прехвърляте един набор от CSS свойства от един селектор към друг. Това също помага за поддържане на файловете на Sass компактни.

Селекторът на запълвача позволява дефинирането на модули. Тази модулиране позволява разделянето на Sass синтаксиса на логически блокове, които могат да бъдат включени на различни места.

Миксините са функции, които например могат значително да опростят работните процеси. В това видео се показва как можете да дефинирате собствените си миксини и накрая да ги приложите.

Със селектора, за който става въпрос в това видео, можете да достигнете до родителски елемент на един елемент. Този селектор, както е известно, не съществува в CSS и затова предлага огромна добавена стойност.

Sass позволява използването на For цикли. Това работи много лесно в Sass и може да бъде използвано например за дефиниране на собствена система за решетка.

Освен оператора `for`, в Sass могат да се използват и цикли тип `each` и `while`. Как това може да се използва за автоматизация, може да се види в това видео.

В езици като PHP и JavaScript има възможност да реагирате на различни събития чрез if и else. Такава възможност има и в Sass. Как да я използвате е показано в това видео.

Можете да смятате в Sass. Това например е практично по отношение на дефинирането на размерите на шрифтовете. Благодарение на съответните оператори обаче може да изградите и своя собствена сетка.

Разбира се, в Sass могат да бъдат дефинирани цветове. Но Sass отива много по-далеч от обикновеното CSS и в тази област. Благодарение на съответните функции може например лесно да се манипулират цветовете.

Compass-Framework-а разширява възможностите на Sass с още много. Това първо видео показва как да инсталирате и използвате Compass.

Уебсайтът на проекта на Compass е основното информационно средство, когато става въпрос за работа с този фреймуърк. Ще ви покажа как можете да работите с документацията посредством функциите на CSS3 на Compass.

Един пример показва колко лесно се реализират нещата с Compass. В края на този ред също така ще бъде хвърлен поглед към алтернативна Sass рамка. Susy предлага изчистена решеткова система.