Sass коментарі: можливості, про які ви не знали

17

Від автора: у цій главі ми розглянемо Sass коментарі. Вони являють собою розміщені у вихідному коді неисполняемые оператори і роблять вихідний код більш зрозумілим. SASS підтримує два типи коментарів.

Багаторядкові коментарі. Вони прописуються за допомогою спеціальних символів /* та */. Багаторядкові коментарі зберігаються в вихідному коді CSS.

Однорядкові коментарі. Вони прописуються за допомогою спеціального символу //, за яким слідує коментар. Однорядкові коментарі не зберігаються в вихідному коді CSS.

Приклад

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

SASS comments

Welcome to TutorialsPoint

TutorialsPoint

Потім створіть файл style.scss.

/* Цей коментар складається
* більш ніж з одного рядка,
* так як для нього використовується синтаксис коментарів CSS,
* він зберігається у вихідному коді CSS. */
body { color: black; }
// Ці коментарі складаються з одного рядка.
// Вони не зберігаються в вихідному коді CSS,
// так як для них використовується синтаксис однорядкових коментарів.
a { color: blue; }

Ви можете вказати SASS переглядати файл і оновлювати CSS кожен раз, коли змінюється файл SASS, з допомогою наступної команди:

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

Потім виконайте наведену вище команду; вона автоматично створить файл style.css з наступним кодом:

/* Цей коментар складається
* більш ніж з одного рядка,
* так для нього використовується синтаксис коментарів CSS,
* він зберігається у вихідному коді CSS. */
body {
color: black; }
a {
color: blue; }

Результат на виході

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

Збережіть зазначений вище html-код у файлі sass_comments.html.

Відкрийте HTML-файл у браузері, ви повинні побачити те ж, що наведено на малюнку.

Sass коментарі: можливості, про які ви не знали

Щоб отримати інформацію по інтерполяції всередині багаторядкових коментарів, перейдіть за цим посиланням.

Sass — Інтерполяція в коментарях багаторядкових

Опис. Інтерполяція всередині багаторядкових коментарів регулюється в отриманому CSS. Ви можете вказати змінні або імена властивостей у фігурних дужках.

Синтаксис

$var : «value»;
/* багаторядковий коментар #{$var} */

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

SASS comments

Welcome to TutorialsPoint

This is an example for Interpolation in SASS.

Потім створіть файл style.scss.

/* Версія фреймворку для згенерована коду CSS — 7.8. */

Результат на виході

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

Збережіть зазначений вище html-код у файлі sass_comments_interpolation.htm.

Відкрийте HTML-файл у браузері, ви повинні побачити те ж, що наведено на малюнку.

Sass коментарі: можливості, про які ви не знали