gistfile1.scss

//
// Bootstrap Less
// --------------------------------------------------


/**
 * Suit.css Component Name
 */


/*------------------------------------*\
    INUIT PAGE HEADING
\*------------------------------------*/


/**
 * Inuit Component w/code example
 *
   `@include vendor(border-radius, 4px);`
 *
 */


//
// ZURB Component Badge
//

I like how suit is annotated w/numbers for the less-obvious pieces of code. The self-explanatory rules are not explained but the more-obscure ones (in this case, max-width) are explained in an easy-to-follow way.

/**
 * Suit.css Component Name
 */

.u-inline {
  display: inline !important;
}

/**
 * 1. Fix for Firefox bug: an image styled `max-width:100%` within an
 * inline-block will display at its default size, and not limit its width to
 * 100% of an ancestral container.
 */

.u-inlineBlock {
  display: inline-block !important;
  max-width: 100%; /* 1 */
}

.u-block {
  display: block !important;
}

.u-table {
  display: table !important;
}

.u-tableCell {
  display: table-cell !important;
}

Another thing to consider is how Sass will output the comments. Ideally, each project will be minified and have 0 comments on production, but sometimes stuff unintentionally makes it up w/some comments.

/* These get rendered */ and // These do not