Препроцессор 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:

[php]

# Конвертировать SASS в SCSS

$ sass-convert style.sassstyle.scss

# Конвертировать SCSS в SASS

$ sass-convert style.scssstyle.sass

[/php]

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

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

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

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

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

[php]

$font-stack:    Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

color: $primary-color

[/php]

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

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

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

[php]

Body {

font: 100% $font-stack;

color: $primary-color;

}

[/php]

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

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

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

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

[php]

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Синтаксис SASS и SCSS</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p class="paragraph1">Lorem ipsum dolor sit amet, consecteturadipisicingelit. Necessitatibusipsaquis, maioresevenietatqueillo rem autemblanditiisiusto sit eumeligendi culpa ullamdebitisinciduntofficiaofficiis, in provident.</p>

<h1>Consecteturadipisicingelit.</h1>

<p class="paragraph2">Lorem ipsum dolor sit amet, consecteturadipisicingelit. Officiisquascorporis quos neque nihil, iurevellabore, eiusevenietdistinctiorepudiandaeut qui accusantium.</p>

<p>Lorem ipsum dolor sit amet, consecteturadipisicingelit. Deleniti, eaquasiestrationeodio.</p>

</body>

</html>

[/php]

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

[php]

.class1,

.class2{

color:red;

}

[/php]

Как видите, данный код ниже не отличается от 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 файла.