Учебники

Sass — Комментарии

Январь 26, 2019

В этой главе мы будем изучать Sass Comments . Комментарии представляют собой неисполняемые операторы, которые помещаются в исходный код. Комментарии облегчают понимание исходного кода. SASS поддерживает два типа комментариев.

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

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

Многострочные комментарии — написаны с использованием / * и * /. Многострочные комментарии сохраняются при выводе 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 .

style.scss 

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

Вы можете указать SASS смотреть файл и обновлять CSS при каждом изменении файла SASS, используя следующую команду: 

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

Затем выполните приведенную выше команду; он автоматически создаст файл style.css со следующим кодом —

style.css 

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }

a {
   color: blue; }

Выход

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

  • Сохраните приведенный выше HTML-код в файле sass_comments.html .

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

Сохраните приведенный выше HTML-код в файле sass_comments.html .

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

Sass Комментарии

Чтобы узнать об интерполяции в многострочных комментариях, нажмите эту ссылку .

Sass — интерполяция в многострочных комментариях

Описание

Интерполяция внутри многострочных комментариев разрешается в результирующем CSS. Вы можете указать переменные или имена свойств в фигурных скобках.

Синтаксис 

$var : "value";
/* multiline comments #{$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 .

style.css 

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

Вы можете указать SASS смотреть файл и обновлять CSS при каждом изменении файла SASS, используя следующую команду: 

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

Затем выполните приведенную выше команду; он автоматически создаст файл style.css со следующим кодом

style.css 

/* Framework version for the generated CSS is 7.8. */

Выход

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

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

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

71
Share: