Group items tagged

All Vendor Prefixes Use @mixins

Global and Section-Specific Sass Files Are just Table of Contents In other words, no styles directly in them. Force yourself to keep all styles organized into component parts.

List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts

Comments get stripped when compiling to compressed code, so there is no cost.

Partials are named _partial.scss

Variablize All Colors Except perhaps white and black.

In your global stylesheet, @import a _shame.scss file last.

postfix color names with -color:

add a prefix like header- or footer- for specific sections: // Header $header-height: 100px; $header-background-color: $color-brand; // Footer $footer-height: 200px; $footer-background-color: #aaa;

I like to keep all my variables in a single file, called _config.scss, that I include in my primary stylesheet using the @import directive.