Default comment blocks for a Sass utilities partial

gistfile1.scss

/*
 * Extends - @extend .inheritance-class;
 *
 * Selectors extending a class get comma separated. Property / value pairs ARE NOT duplicated everywhere.
 * Use for simple selectors. Warning: it gets messy where there are sub-nodes
 *
 * Still unsure? Use @extend if a relationship IS implied AND you need the base class in the stylesheet. Example:
 *      .message { ... }
 *      .error { @extend .message; ... }
 *      .info { @extend .message; ... }
 */


/*
 * Placeholders - @extend %placeholder;
 *
 * Works the same as @extend in that elements inheriting the extension are output as comma separated selectors.
 * Property / value pairs ARE NOT duplicated everywhere.
 * Use when you want to abstract something, but DON'T need the class itself in the stylesheet.
 *
 * Still unsure? Use %placeholders if a relationship IS implied AND you DON'T need a base style class in the stylesheet. Example:
 *      %hover-styles { ... }
 *      .desktop .some-element:hover { @extend %hover-styles; ... }
 *      .mobile .some-element.fake-hover { @extend %hover-styles; ... }
 */


/*
 * Mixins - @include mixin-name;
 *
 * Property / value pairs ARE copied everywhere mixins are used.
 * Use mixins when you don't want to place a class in the HTML (ex. border-radius)
 *  Or for small numbers of prop-val pairs
 *
 * Still unsure? Use @include if there a relationship IS NOT implied. Example:
 *      @mixin awesome-border-radius { ... }
 *      .some-element { @include awesome-border-radius; ... }
 */


/*
 * Functions - .selector { property: functionName(); };
 *
 * Helpful for calculations and conditional logic
 *
 * Example:
 *      @function fluidize($target, $context) { @return ($target / $context * 100); }
 *      .some-element { width: fluidize(350px, 900px); ... }
 */