Комментарии

В SCSS

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

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

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

// This comment won't be included in the CSS.

/* But this comment will, except in compressed mode. */

/* It can also contain interpolation:
* 1 + 1 = #{1 + 1} */

/*! This comment will be included even in compressed mode. */

p /* Multi-line comments can be written anywhere
  * whitespace is allowed. */ .sans {
  font: Helvetica, // So can single-line comments.
        sans-serif;
}

/* CSS */
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
* 1 + 1 = 2 */
/*! This comment will be included even in compressed mode. */
p .sans {
  font: Helvetica, sans-serif;
}

В Sass

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

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

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

// SASS
// This comment won't be included in the CSS.
  This is also commented out.

/* But this comment will, except in compressed mode.

/* It can also contain interpolation:
  1 + 1 = #{1 + 1}

/*! This comment will be included even in compressed mode.

p .sans
  font: Helvetica, /* Inline comments must be closed. */ sans-serif

/* CSS */
/* But this comment will, except in compressed mode. */
/* It can also contain interpolation:
 * 1 + 1 = 2 */
/*! This comment will be included even in compressed mode. */
p .sans {
  font: Helvetica, sans-serif;
}

Комментарии документации

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

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

/// Computes an exponent.
///
/// @param {number} $base
///   The number to multiply by itself.
/// @param {integer (unitless)} $exponent
///   The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exponent`.
@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

// SASS
/// Computes an exponent.
///
/// @param {number} $base
///   The number to multiply by itself.
/// @param {integer (unitless)} $exponent
///   The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exponent`.
@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent
    $result: $result * $base

  @return $result