Sass комментарии: возможности, о которых вы не знали

Sass комментарии: возможности, о которых вы не знали

От автора: в этой главе мы рассмотрим Sass комментарии. Они представляют собой размещенные в исходном коде неисполняемые операторы и делают исходный код более понятным. SASS поддерживает два типа комментариев.

Многострочные комментарии. Они прописываются с помощью специальных символов /* и */. Многострочные комментарии сохраняются в выходном коде CSS.

Однострочные комментарии. Они прописываются с помощью специального символа //, за которым следует комментарий. Однострочные комментарии не сохраняются в выходном коде CSS.

Пример

Следующий пример демонстрирует использование комментариев в файле SCSS:

<html>
 <head>
 <title>SASS comments</title>
 <link rel = "stylesheet" type = "text/css" href="style.css"/>
 </head>
 <body>
 <h1>Welcome to TutorialsPoint</h1>
 <a href = "http://www.tutorialspoint.com/">TutorialsPoint</a>
 </body>
</html>

Затем создайте файл style.scss.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее
/* Этот комментарий состоит
 * более, чем из одной строки,
 * так как для него используется синтаксис комментариев 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:

<html>
 <head>
 <title>SASS comments</title>
 <link rel = "stylesheet" type = "text/css" href="style.css"/>
 </head>
 <body>
 <h1>Welcome to TutorialsPoint</h1>
 <p>This is an example for Interpolation in SASS.</p>
 </body>
</html>

Затем создайте файл style.scss.

/* Версия фреймворка для сгенерирована кода CSS - 7.8. */

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

Давайте выполним следующие действия, чтобы увидеть, как работает приведенный выше код:

Сохраните указанный выше html-код в файле sass_comments_interpolation.htm.

Откройте этот HTML-файл в браузере, вы должны увидеть то же, что приведено на рисунке.

Sass комментарии: возможности, о которых вы не знали

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Узнать подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree