От автора: в этой главе мы рассмотрим Sass комментарии. Они представляют собой размещенные в исходном коде неисполняемые операторы и делают исходный код более понятным. SASS поддерживает два типа комментариев.
Многострочные комментарии. Они прописываются с помощью специальных символов /* и */. Многострочные комментарии сохраняются в выходном коде CSS.
Однострочные комментарии. Они прописываются с помощью специального символа //, за которым следует комментарий. Однострочные комментарии не сохраняются в выходном коде CSS.
Пример
Следующий пример демонстрирует использование комментариев в файле SCSS:
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <title>SASS comments</title> <link rel = "stylesheet" type = "text/css" href="style.css"/> </head> <body> <h1>Welcome to TutorialsPoint</h1> <a href = "//www.tutorialspoint.com/">TutorialsPoint</a> </body> </html> |
Затем создайте файл style.scss.
|
1 2 3 4 5 6 7 8 9 |
/* Этот комментарий состоит * более, чем из одной строки, * так как для него используется синтаксис комментариев CSS, * он сохраняется в выходном коде CSS. */ body { color: black; } // Эти комментарии состоят из одной строки. // Они не сохраняются в выходном коде CSS, // так как для них используется синтаксис однострочных комментариев. a { color: blue; } |
Вы можете указать SASS просматривать файл и обновлять CSS каждый раз, когда изменяется файл SASS, с помощью следующей команды:
|
1 |
sass --watch C:\ruby\lib\sass\style.scss:style.css |
Затем выполните приведенную выше команду; она автоматически создаст файл style.css со следующим кодом:
|
1 2 3 4 5 6 7 8 |
/* Этот комментарий состоит * более, чем из одной строки, * так для него используется синтаксис комментариев CSS, * он сохраняется в выходном коде CSS. */ body { color: black; } a { color: blue; } |
Результат на выходе
Давайте выполним следующие действия, чтобы посмотреть, как работает приведенный выше код:
Сохраните указанный выше html-код в файле sass_comments.html.
Откройте этот HTML-файл в браузере, вы должны увидеть то же, что приведено на рисунке.
Чтобы получить информацию по интерполяции внутри многострочных комментариев, перейдите по этой ссылке.
Sass — Интерполяция в многострочных комментариях
Описание. Интерполяция внутри многострочных комментариев регулируется в полученном CSS. Вы можете указать переменные или имена свойств в фигурных скобках.
Синтаксис
|
1 2 |
$var : "value"; /* многострочный комментарий #{$var} */ |
На следующем примере мы продемонстрируем использование интерполяции в многострочных комментариях в файле SCSS:
|
1 2 3 4 5 6 7 8 9 10 |
<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.
|
1 |
/* Версия фреймворка для сгенерирована кода CSS - 7.8. */ |
Результат на выходе
Давайте выполним следующие действия, чтобы увидеть, как работает приведенный выше код:
Сохраните указанный выше html-код в файле sass_comments_interpolation.htm.
Откройте этот HTML-файл в браузере, вы должны увидеть то же, что приведено на рисунке.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
