Від автора: в цій главі ми вивчимо 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.
Відкрийте цей файл у браузері, і ви побачите наступне.
Коментарі
Коментарі займають цілий рядок. У синтаксисі з відступами вони засновані на рядках.
@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 підтримує старий синтаксис. Однак використовувати його не рекомендується. Якщо використовувати старий синтаксис, то на екрані будуть відображатися попередження. В наступних версіях він буде видалено. У таблиці нижче показані деякі старі оператори.
