eliot-akira / sass-guide

Sass best practices

Sass Guide

A collection of Sass best practices

Syntax & Formatting

Two spaces for indent, no tabs

Max 80-characters per line

Open bracket on same line as selector; close bracket on its own line

One rule per line

No space before colon; one space after

Blank line between selector blocks

Sass features

Use of variables, @extend and @include

Maximum three levels of nesting

Modifiers and pseudo-selectors as child rules: hover, active, focus

Responsive: breakpoints, media query mixins

Architecture

base

• Variables, colors, typography

patterns

• Buttons, carousel, dropdown

sections

• Menus, header, footer, sidebar, forms

pages

• Page-specific styles

utils

• Mixins, helpers

Build

A basic example of using Sass with compile, minify and watch tasks: Sass Example

An example using Gulp build system: Boots

References

Sass Style Guide

Sass Guidelines

• Syntax & Formatting

The Sass Way

• How to structure a Sass project

• Using Object-Oriented CSS with Sass

• Modular CSS naming conventions

• Modular CSS typography

• A standard module definition for Sass