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

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

Различие между синтаксисом 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 кодом

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

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

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

Номер SASS оператор и его описание
1 =
Оператор присвоения значения в SASS
2 ||=
Этот оператор использовался, чтобы присвоить переменной значение по умолчанию.
3 !
Раньше восклицательный знак в SASSиспользовался вместо знака доллара при объявлении переменной.

 

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

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

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

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

Возможно, эти записи вам покажутся интересными


Выберете удобный для себя способ, чтобы оставить комментарий

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Loading Disqus Comments ...