Комментарии

В SCSS permalinkВ SCSS

Комментарии в SCSS работают аналогично комментариям на других языках, таких как JavaScript. Однострочные комментарии начинаются с // и идут до конца строки. Ничто в однострочном комментарии не передается как CSS; Что касается Sass, то они могут и не существовать. Их также называют тихими комментариями, потому что они не создают CSS.

Многострочные комментарии начинаются с /* и заканчиваются следующим */. Если где-то написан многострочный комментарий, где разрешена конструкция, он компилируется в комментарий CSS. Их также называют громкими комментариями, в отличие от тихих комментариев. Многострочный комментарий, скомпилированный в CSS, может содержать интерполяцию, которая будет оценена перед компиляцией комментария.

По умолчанию многострочные комментарии удаляются из скомпилированного CSS в [сжатый режим]compressed mode. Однако, если комментарий начинается с /*!, он всегда будет включен в вывод CSS.

// Этот комментарий не будет включен в CSS.

/* Но этот комментарий будет, кроме как в режиме сжатия. */

/* Он также может содержать интерполяцию:
 * 1 + 1 = #{1 + 1} */

/*! Этот комментарий будет включен даже в режиме сжатия. */

p /* Многострочные комментарии можно писать везде,
   * где разрешены пробелы. */ .sans {
  font: Helvetica, // Так могут однострочные комментарии.
        sans-serif;
}

@charset "UTF-8";
/* Но этот комментарий будет, кроме как в режиме сжатия. */
/* Он также может содержать интерполяцию:
 * 1 + 1 = 2 */
/*! Этот комментарий будет включен даже в режиме сжатия. */
p .sans {
  font: Helvetica, sans-serif;
}

В Sass permalinkВ Sass

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

Комментарии синтаксиса с отступом, которые начинаются с /*, работают с отступом точно так же, за исключением того, что они скомпилированы в CSS. Поскольку расширение комментария основано на отступе, закрывающий символ */ необязателен. Также, как и в SCSS, комментарии /* могут содержать интерполяцию и могут начинаться с /*!, чтобы избежать удаления в режиме сжатия.

Комментарии также можно использовать внутри выражений в синтаксисе с отступом. В этом случае они имеют точно такой же синтаксис, как и в SCSS.

// Этот комментарий не будет включен в CSS.
   Это также закомментировано.

/* Но этот комментарий будет, кроме как в режиме сжатия.

/* Он также может содержать интерполяцию:
   1 + 1 = #{1 + 1}

/*! Этот комментарий будет включен даже в режиме сжатия.

p .sans
  font: Helvetica, /* Встроенные комментарии должны быть закрыты. */ sans-serif

@charset "UTF-8";
/* Но этот комментарий будет, кроме как в режиме сжатия. */
/* Он также может содержать интерполяцию:
 * 1 + 1 = 2 */
/*! Этот комментарий будет включен даже в режиме сжатия. */
p .sans {
  font: Helvetica, sans-serif;
}

Документация по комментариям permalinkДокументация по комментариям

При написании библиотек стилей с использованием Sass вы можете использовать комментарии для документирования миксинов, функций, переменных и [][селекторов плейсхолдера], которые предоставляет ваша библиотека, а также самой библиотеки. . Эти комментарии читает инструмент SassDoc, который использует их для создания красивой документации. Ознакомьтесь с документацией движка сетки Susy, чтобы увидеть его в действии!

Комментарии к документации - это безмолвные комментарии, написанные с тремя косыми чертами (///) непосредственно над тем, что вы документируете. SassDoc анализирует текст в комментариях как Markdown и поддерживает множество полезных аннотаций для его подробного описания.

/// Вычисляет показатель степени.
///
/// @param {number} $base
///   Число, которое нужно умножить само на себя.
/// @param {integer (unitless)} $exponent
///   Количество `$base` для умножения.
/// @return {number} `$base` в степени `$exponent`.
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

/// Вычисляет показатель степени.
///
/// @param {number} $base
///   Число, которое нужно умножить само на себя.
/// @param {integer (unitless)} $exponent
///   Количество `$base` для умножения.
/// @return {number} `$base` в степени `$exponent`.
@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base

  @return $result