Sass in the Real World: book 1 of 4

Code comments

Sass supports both invisible and visible comments. Using // before any Sass, this will place a comment in your code, but will not be output in the processed CSS. Using the standard /* */ CSS comments in your Sass, when processed this will be output in your CSS.

Leaving comments or instructions in your code is just good practice. I find it essential to leave good instructions behind about my code using the invisible technique as I begin to engineer increasingly more complicated Sass.

The following example is a sample of code from the Compass library illustrating a good use of comments.

//  override to change the default
$default-background-size: 100% auto !default;
// Set the size of background images using px,
// width and height, or percentages.
// Currently supported in: Opera, Gecko, Webkit.
// * percentages are relative to the background-origin
// (default = padding-box)
// * mixin defaults to: `$default-background-size`
@mixin background-size(
  $size-1: $default-background-size,
  $size-2: false,
  $size-3: false,
  $size-4: false,