30th April 2013


SASS for responsive & modular CSS

Tom Jenkins


responsive = widgetised


Latest blog posts list
Image gallery
Contact form

  • Design from the components out, not the layout in
  • Widgets should have a distinct concept and purpose

Reading: Jonathan Snook's SMACSS

conflict of interests

Two goals for CSS:

1. Maintainable/modular (for developers)
- scalable, readable code
- modular, plug and play widgets

2. High performance (for users)
- minimise HTTP requests, file size

Two audiences, two mutually exclusive goals

SASS to the rescue!

Separate SASS file for each widget
Another for layouts
Pull in any CSS frameworks

one minified CSS file.

rewind - what is SASS?

CSS Pre-processor, lets you:

  • Nest rules
  • Use $variables
  • Write @mixins (helper functions)
  • @extend classes (OOCSS)

Compiles to regular ol' CSS.

@mixin example

compass - a SASS extension

  • CSS3 helpers (no more vendor prefixes!)
  • compass watch -  compiles SASS -> CSS on save

the grid problem

an easy solution - css frameworks

  • Hard work already done
  • No reinventing the wheel
  • Often modular & customisable

use with SASS - just @import.
Some are even available as SASS (e.g. Foundation).

one BIG problem with CSS frameworks...

...presentational classes - no!

A typical layout...

you might as well build your layouts with tables.

There, I said it.

presentational classes

- Are hard to reskin

- Make writing semantic, reusable code difficult

- limit 'responsive thinking'

- And if you want your columns to do anything but stack on smaller screens:

Fear not. SASS to the rescue, again.

approach 1: use a SASS grid library

Zen Grids - http://zengrids.com

Helper @mixins, grid setup via $variables.

approach 2: @extend

the @extend idea

inheriting the styles of another selector

http://codepen.io/itsravenous/pen/cdGFm - Foundation grid example

@extend, SASS grids and file size

using @mixins from a SASS grid = repeated blocks of the same CSS

@extend, on the other hand, just generates one code block with lots of selectors.

But most servers will gzip your css (and other files) so go with whatever feels more you.

both @extend and @mixins afford the same awesome end result

all the readability of presentational classes...

...without them ending up in your markup

so when you reskin, you edit CSS (SASS), not HTML.

you can do this with your own selectors too, not just framework classes

I call this

"Presentational Semantics"

(TM, ©, ® #youheardithearfirst)

so go forth and be SASSy!

@include triangle

@extend .fancy-heading


dinosaur(10em, green)

Cheers. Questions? Threats? Grab me now or tweet @itsravenous later

sass for modular and responsive

By itsravenous

sass for modular and responsive

  • 2,050
Loading comments...