SASS Style Guide / Coding Standards

gistfile1.sass

/**
 * Code block comment
 */

$variable: 1;
$variable: 2;

.selector {
  @extend %placehold-extender;
  @include functionname();
  property: value;
  property: value;
  @media all and (property: value) {
    property: value;
  }
  &:hover, 
  &:visited {
   property: value;
  }
  > .direct-children {
    property: value
  }
  // Inline comment
  .other-selectors {
    @include functionname();
    property: value;
    property: value;
    @media all and (property: value) {
      property: value;
      .other-selector {
        property: value;
      }
    }
  }
}

/**
 * Order of preference:
 * 
 * 1. Extends
 * 2. Includes
 * 3. Declarations
 * 4. Media queries
 * 5. Nested rules
 *
 */

/**
 * Other suggestions:
 *
 * 1. Don't nest too deep (4 max), or write nested rules which are too long (~100 lines max)
 * 2. Name your variables modularly http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-name-your-sass-variables-modularly/
 *
 */

/**
 * References:
 *
 * https://medium.com/building-potluck/74434b267920
 * http://css-tricks.com/sass-style-guide/
 * http://www.ackmanndickenson.com/2013/08/a-sass-style-guide/
 *
 */