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.
If you find yourself using a number other than 0 or 100% over and over, it likely deserves a variable.
List Vendor/Global Dependancies First, Then Author Dependancies, Then Patterns, Then Parts
In Deployment, Compile Compressed
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.
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.