"Rules"

Don't nest too deep.

• you will lose track of your closing }.
   
• Nest abundantly to rapidly create initial styles, then refactor immediately to flatten the nesting.
   
• Appropriate nesting will output CSS with *JUST ENOUGH* specificity. You do not want styles that are too specific.
   
• Show example of horribly nested code...

Don't abuse @extends.

If the output css is really ugly, and clumps together unrelated items, it doesn't make sense to use @extends.

...I just never use it. :/

Order of Style Declarations

• @includes first
• media queries for the top-level element
• child selectors, pseudo-selectors, etc.

Clump Similar Properties together

• layout properties
• spacing properties
• font properties

Spacing (Suggestions)

• 1 vertical space above lines with opening selectors{
• No vertical spaces for all the closing }
• 2-space indents

Always check the CSS for clean output.

Generally, your css should still be clean and beautiful when it is compiled.

If you write bad scss it will output very very bad css.

Grok the tl;dr of http://sass-guidelin.es/

Debugging

background-color:red;

Something isn't working!

Did the element react to the change?

Check gulp for errors.

No :(

Did the element react to the change?

Check Chrome inspector.

No :(

Are your styles being overwritten by something more specific?

I don't see my styles at all!

No :(

Maybe you wrote the html selector wrong?

I still don't see my styles at all!

No :(

Maybe you nested the html selector wrong?

I stillllll don't see my styles at all!

No :(

Maybe you used "&" wrong?

I stilllllllll don't see my styles at all!

No :(

Maybe you need to import a partial or styles?

I stilllllllllllll don't see my styles at all!

No :(

Are you even in the right directory?