Синтаксис Sass: відступи і SCSS

17

Від автора: в цій главі ми вивчимо Sass синтаксис. Sass підтримує два синтаксису: SCSS і синтаксис відступів.

SCSS (Sassy CSS) – це розширення синтаксис CSS. Тобто валідний CSS також є валідним SCSS. SCSS сильно полегшує обслуговування великих стилів і вміє розпізнавати синтаксис вендорних префіксів. Безліч файлів CSS і SCSS використовують розширення .scss.

Синтаксис відступів – це старий синтаксис, його ще називають SASS. Цей синтаксис сильно скорочує код CSS. SASS файли мають розширення .sass.

Синтаксис відступів SASS

Синтаксис відступів Sass або просто Sass – альтернатива SCSS синтаксису, заснованому на CSS.

Замість { і } він використовує відступи, щоб відокремлювати блоки.

Для поділу виразів використовується нова рядок замість ;

Оголошення властивостей і селекторів повинні бути на окремих рядках, а вираження всередині {} повинні розташовуватися з нового рядка з відступом.

Наприклад, візьмемо код SCSS нижче:

.myclass {
color = red;
font-size = 0.2 em;
}

Синтаксис відступів – старий синтаксис, не рекомендується його використовувати в нових Sass файлах. Якщо використовувати цей файл, він покаже помилку, так як ми використовували = замість того, щоб задати властивості і змінні.

Скомпілюйте код вище з допомогою цієї команди

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

Запустіть верхню команду, воно покаже помилку у style.css, як показано нижче:

Error: Invalid CSS after «color = red»: expected «{«, was «;»
on line of 2 C:\ruby\lib\sass\style17.scss
.myclass {
color = red;
font-size = 0.2 em;
}

Відмінності синтаксису SASS

Велика частина синтаксис CSS і SCSS відмінно працює в Sass. Тим не менш, є деякі відмінності, які ми розберемо нижче.

Синтаксис властивостей

Властивості CSS можна оголошувати двома способами:

Властивості можна оголошувати так само, як CSS, але без ;

Перед кожним властивістю можна додавати :

Наприклад, можна написати так:

.myclass
:color red
:font-size 0.2 em

Обидва способи можна використовувати за промовчанням. Однак разом з :property_syntax можна використовувати тільки один синтаксис властивостей.

Багаторядкові селектори

У синтаксисі з відступами селектори можна розміщувати на новому рядку, якщо перед ними є кома.

Приклад

Наступний приклад показує, як використовувати багаторядкові селектори в SCSS файлі:

Multiline Selectors

Example using Multiline Selectors

Welcome to Tutorialspoint!!!

SASS stands for Syntactically Awesome Stylesheet…

Створіть style.scss. Розширення повинно бути scss.

Style.scss

.class1,
.class2{
color:red;
}

SASS можна вказати, щоб він стежити за файлом і оновлював CSS при будь-якій зміні в SASS файлі. Для цього використовуйте наступну команду:

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

Виконайте команду зверху. Вона створить файл style.scss, в якому буде наступний код:

Style.css

.class1,
.class2 {
color: red;
}

Висновок на екран

Давайте виконаємо наступні кроки, щоб побачити всі наші труди в дії:

Збережіть HTML код вище multiline_selectors.html.

Відкрийте цей файл у браузері, і ви побачите наступне.

Синтаксис Sass: відступи і SCSS

Коментарі

Коментарі займають цілий рядок. У синтаксисі з відступами вони засновані на рядках.

@import

У Sass директиву @import можна записувати як з лапками, так і без них. На відміну від SCSS, їх потрібно використовувати лапки.

Наприклад, в SCSS директива @import використовується так

@import «themes/blackforest»;
@import «style.sass»;

У SASS це можна записати так:

@import themes/blackforest
@import fontstyle.sass

Директиви миксинов

Sass підтримує скорочення для директив @mixin і @include. Замість них можна використовувати символи = і +, що спрощує ваш код і спрощує його читання.

Наприклад, директиву @mixin можна записати наступним чином:

=myclass
font-size: 12px;
p
+myclass

Код вище перетворюється в:

@mixin myclass
font-size: 12px;
p
@include myclass

Застарілий синтаксис

Sass підтримує старий синтаксис. Однак використовувати його не рекомендується. Якщо використовувати старий синтаксис, то на екрані будуть відображатися попередження. В наступних версіях він буде видалено. У таблиці нижче показані деякі старі оператори.

Синтаксис Sass: відступи і SCSS