compass/sass/less: tips, tricks, and best practices

[ SXSW Bios ] #sxsw #compass (Archive)




The slide deck!

We <3 CSS!

Once you store values in variables, you can do calculations (e.g., a base font-size that you use a multiplier; let’s you show your math to document how you got to a value). Colors: using variables, you can set up a common color library with common names to use across projects. Fonts: same thing.

Variables can contain other variables.


Helps you group styles together (true class/namespacing?) and prevents duplication. Allows you to avoid the “.class h1, .class h2, .class h3” rules. Don’t nest just because you can. Includes a parent selector (&) to refer back to the parent (e.g., p.class = p &.class). Can also use at end of string to put the parent thing at the end.


To create parameterized re-usable elements (css ‘methods’). SCSS: @mixin method-name(param, param) {} .my-class { @include method-name(parameter) }. Conditionals? SASS’s syntax is more terse.


Helps to combine classes / tie them together. Extend brings in properties from another rule. SCSS: h3 { @extend h2; } Beware of nesting with extends. Bad.

SASS Partials / @import

Nested @import (.my-namespace { @import home } prefixes each rule in _home.sass with .my-namespace.

Strategy for using partials to make your primary file “loader” clean.


  • @import compass
  • @import config
  • @import reset
  • @import mixins
  • @import sprites




Advanced Features

Guards (LESS): functional programming model. if conditionals create a lot of nested complexity. Guards are flat and declarative, uses the ‘when’ keyword to only execute on condition without if conditional nesting.

Type Checking (LESS): isnumber, iscolor, etc.

Pattern Matching (LESS):


Pattern libraries (of mixins) for CSS/SCSS/SASS code that has already been written. Compass, Fancy Buttons, Formalize, etc.


Use the CSS3 module (@import “compass”), and let the compass library team worry about browser support. E.g., the mixin background-image with a linear-gradient param renders gradient rules for all browser prefixes.

Utility helpers: e.g., #{headings(2,6)} = h2…h6

Color functions: generate complex color rules: hsla/rgba($color, $alpha); lighten/darken/saturate/desaturate/grayscale/complement/invert.

Typography: vertical rhythm: set base font sizes and line heights, @include establish-baseline (does the math for future use of adjust-font-size-to(pixel-unit). leader/trailer by adding correct number of pixels based on the number of rhythm rows you need.