Препроцессор SASS. Изучаем SASS для быстрой верстки. CSS компилятор для быстрой верстки шаблонов и макетов сайта.

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел Препроцессор SASS и SCSS. Продолжаем разбираться с препроцессором SASS, который, как мы говорили, расширяет возможности CSS. Нужно сказать, что язык CSS довольно гибкий и абстрактный, но SASS является еще одним уровнем абстракции уже над CSS и вносит массу полезных возможностей для верстальщика. Об этих возможностях мы коротко поговорим в данной статье.

Расширение возможностей CSS с SASS

Создавая уровень абстракции над CSS, мы неизбежно усложняем общую схему разработки макета, добавляя новые приложения, поэтому мы неизбежно получим какие-то минусы, минусы и неудобства расширений возможности CSS с SASS мы частично рассмотрим в данной статье, а так же поговорим о том, какие плюсы есть у SASS для расширения возможностей CSS.

Минусы и неудобства расширения возможностей CSS с SASS

Препроцессор SASS расширяет возможности языка CSS, давайте разберемся с тем, что именно расширяет SASS в CSS. Ведь то, о чем мы говорили ранее только усложняло оформление HTML документов, но никак нам ничего не облегчало, посудите сами:

1. Нам требуется установить компилятор SASS на компьютер, чтобы это сделать нужно установить Ruby. CSS можно использовать имея по рукой обычный текстовый редактор и браузер.
2. SASS поддерживает два синтаксиса: SASS и SCSS. При этом синтаксис SCSS нам знаком, а SASS еще нужно немного осмыслить.
3. Если наш сайт на Ruby, то нам необходимо разобраться с тонкостями работы и настройкой SASS компилятора, чтобы ускорить работу сайта.

Пока мы видим только сложности и неудобства, главная из которых заключается в том, что для работы SASS нужно ставить какие-то сторонние программы.

Как SASS расширяет возможности CSS

Но давайте все-таки взглянем на плюсы и посмотрим, как SASS расширяет возможности CSS. И какие плюсы получает разработчик, усложняя логику, устанавливая Ruby и настраивая SASS компилятор.

Перечислим функции SASS, которые расширяют возможности CSS:

1. Вложенные правила SASS. Вложенные правила в SASS позволяют объединять несколько CSS правил в одно.
2. Ссылка на родительский селектор в SASS. Эта штука позволяет наследовать стили одному селектору от другого при помощи символа &. Селектор, который перенимает свойства называется дочерним, селектор, который передает свойства – родительский.
3. Вложенные свойства в SASS. При помощи вложенных свойств мы можем позволить себе более короткую форму записи свойств CSS.
4. Шаблонные селекторы в SASS. Еще один инструмент наследования стилей для селекторов в SASS. Только в данном случае наследование происходит не от какого-то конкретного селектора, а от заданного шаблона.

Мы перечислили только базовые возможности расширения CSS с SASS. Но есть еще SassScript, который дает массу полезных возможностей, например, использование переменных и математических операций.

Управляющие директивы, которые позволяют задавать логику конструкцией if и создавать CSS стили при помощи циклов. Так же SASS имеет в своем арсенале миксины или примеси и функции.