Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел Препроцессор SASS и SCSS. Продолжаем разбираться с препроцессором SASS, который, как мы говорили, расширяет возможности CSS. Нужно сказать, что язык CSS довольно гибкий и абстрактный, но SASS является еще одним уровнем абстракции уже над CSS и вносит массу полезных возможностей для верстальщика. Об этих возможностях мы коротко поговорим в данной статье.
Расширение возможностей CSS с SASS
Создавая уровень абстракции над CSS, мы неизбежно усложняем общую схему разработки макета, добавляя новые приложения, поэтому мы неизбежно получим какие-то минусы, минусы и неудобства расширений возможности CSS с SASS мы частично рассмотрим в данной статье, а так же поговорим о том, какие плюсы есть у SASS для расширения возможностей CSS.
Минусы и неудобства расширения возможностей CSS с SASS
Препроцессор SASS расширяет возможности языка CSS, давайте разберемся с тем, что именно расширяет SASS в CSS. Ведь то, о чем мы говорили ранее только усложняло оформление HTML документов, но никак нам ничего не облегчало, посудите сами:
- Нам требуется установить компилятор SASS на компьютер, чтобы это сделать нужно установить Ruby. CSS можно использовать имея по рукой обычный текстовый редактор и браузер.
- SASS поддерживает два синтаксиса: SASS и SCSS. При этом синтаксис SCSS нам знаком, а SASS еще нужно немного осмыслить.
- Если наш сайт на Ruby, то нам необходимо разобраться с тонкостями работы и настройкой SASS компилятора, чтобы ускорить работу сайта.
Пока мы видим только сложности и неудобства, главная из которых заключается в том, что для работы SASS нужно ставить какие-то сторонние программы.
Как SASS расширяет возможности CSS
Но давайте все-таки взглянем на плюсы и посмотрим, как SASS расширяет возможности CSS. И какие плюсы получает разработчик, усложняя логику, устанавливая Ruby и настраивая SASS компилятор.
Перечислим функции SASS, которые расширяют возможности CSS:
- Вложенные правила SASS. Вложенные правила в SASS позволяют объединять несколько CSS правил в одно.
- Ссылка на родительский селектор в SASS. Эта штука позволяет наследовать стили одному селектору от другого при помощи символа &. Селектор, который перенимает свойства называется дочерним, селектор, который передает свойства – родительский.
- Вложенные свойства в SASS. При помощи вложенных свойств мы можем позволить себе более короткую форму записи свойств CSS.
- Шаблонные селекторы в SASS. Еще один инструмент наследования стилей для селекторов в SASS. Только в данном случае наследование происходит не от какого-то конкретного селектора, а от заданного шаблона.
Мы перечислили только базовые возможности расширения CSS с SASS. Но есть еще SassScript, который дает массу полезных возможностей, например, использование переменных и математических операций.
Управляющие директивы, которые позволяют задавать логику конструкцией if и создавать CSS стили при помощи циклов. Так же SASS имеет в своем арсенале миксины или примеси и функции.
Выберете удобный для себя способ, чтобы оставить комментарий