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

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел Препроцессор SASS и SCSS. Это записью мы познакомимся с особенностями синтаксиса SASS и SCSS. Если слово синтаксис не совсем понятно, то можно сказать: правила написания кода SASS и SCSS. SASS уже довольно старая технология, которая на пути своего развития претерпевала изменения, мы разберемся с тем, какие конструкции уже не стоит использовать в коде SASS версии 3.

Различие между синтаксисом SASS и SCSS

В этой записи мы рассмотрим: виды синтаксиса в SASS, особенности синтаксиса SASS, особенности синтаксиса Sassy CSS или SCSS, правила написания множественных селекторов SASS, запрещенные языковые конструкции в SASS и синтаксис комментариев в SASS.

Виды синтаксис препроцессора SASS. Различие между SASS и SCSS

Препроцессор SASS имеет два различных синтаксиса: Sassy CSS и синтаксис с отступом или просто SASS. Синтаксис SCSS использует абсолютно те же правила, что и CSS, но имеет некоторые возможности, которые расширяют CSS. SCSS поддерживает множество хуков CSS, в том числе и некоторые хуки для корректного отображения HTML документов в старых браузерах IE. Чтобы компилятор SASS понимал, что вы пишите код на SCSS сохраняйте файлы с расширение .scss.

Второй синтаксис SASS похож на синтаксис языка Ruby и использует отступы. Второй синтаксис обычно так и называют: синтаксис SASS. Синтаксис SASS появился раньше, чем SCSS. Цель синтаксиса SASS – сократить CSS код, поэтому вложенность селекторов SASS обозначается отступами, а CSS свойства отделяются друг от друга символом переноса строки, а не точкой с запятой, как это реализовано в CSS или в SCSS. Чтобы SASS компилятор понял, что код написан с использованием синтаксиса SASS, используйте расширение .sass.

Различие между SASS и SCSS заключает в правилах написания кода, никаких функциональных различий между SASS и SCSS нет. Компилятор SASS умеет конвертировать SASS в SCSS:

Если вы выполните эти команды, то CSS файл не будет сгенерирован, это просто конвертация одного синтаксиса в другой.

Особенности синтаксиса SASS с отступами

Старый синтаксис SASS или просто синтаксис SASS на данный момент является альтернативой SCSS:

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

Давайте посмотрим пример синтаксиса SASS:

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

Особенности синтаксиса SCSS

Если вы хорошо знакомы с синтаксисом CSS, то никаких проблем с синтаксисом SCSS у вас не будет, как мы уже упоминали, синтаксис SCSS полностью идентичен CSS, но имеет некоторые особенности, которые расширяют возможности CSS, с которыми мы будем знакомиться далее. Ниже пример использования синтаксиса SCSS:

Он ничем не отличается от всем привычного CSS.

Множественные селекторы SASS

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

Давайте создадим простую HTML страницу. Создайте файл index.html со следующей разметкой и сохраните его в папку Ruby:

У нас появилась необходимость сделать текст в HTML параграфах красным,но не во всех, а только в тех, где есть HTML атрибут class. Давайте это реализуем:

Как видите, данный код ниже не отличается от CSS, но сохраните его в папку Ruby\lib\sass, мы назовем его style.scss. Скомпилировать SCSS код в CSS можно командой, об этом мы говорили, когда рассматривали установку SASS компилятора на Windows:

sass --watch C:\ruby\lib\sass\style.scss:style.css

При этом теперь SASS компилятор будет производить компиляцию файл автоматические, как только будут внесены и сохранены изменения в файл .scss.Файл с кодом .cssбудет находиться в каталоге Ruby.

После компиляции SCSS файла в CSS, вы можете открыть HTML документ и увидеть:

Страница оформлена с SASS кодом

Как видите, ничего сложного в синтаксисе SASS и уж тем более в синтаксисе SCSS нет, особенно, если вы уже знакомы с CSS.

Запрещенный синтаксис в SASS

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

Синтаксис комментариев в SASS

SASS, как и любой другой язык, дает возможность написать комментарии, синтаксис SASS поддерживает два вида комментариев:

• строчные комментарии в SASS обозначаются символами // и обычно используются для каких-либо пояснений в коде;
• блочные комментарии в SASS обозначаются символами /*… */. Блочные комментарии в SASS используются обычно для отключения нескольких строк кода, блочный комментарий SASS может занимать сколько угодно строк.

Компилятор SASS просто игнорирует блочные комментарии и оставляет их, как они есть. Обратите внимание: CSS не поддерживает строчные комментарии, поэтому SASS компилятор удалит все строчные комментарии из выходного CSS файла.