from mess to .scss

FROM MESS TO .SCSShttp://bit.ly/1h2w7qv

http://bit.ly/1fmLvNM

{ 500 }75%500

CSS SASS

IMPORTS

VARIABLES

FUNCTIONS

EXTENDS

SPRITE GENERATION * via compass

.scss.css

Why Sass?

$Variables

http://sassmeister.com/gist/7909423

guarded assignment

http://sassmeister.com/gist/7909423

guarded assignment

http://sassmeister.com/gist/7909662

mutable

http://sassmeister.com/gist/7910768

namespaces

http://sassmeister.com/gist/7910953

namespaces

naming conventions

${ component }-{ type }-{ property }

$module-base-font$module-base-font-size$module-base-font-color

variable smell

the result

the result

the result

{ 500 }32

11 DaysLeader 16/01/2013

NewsLocal 30/01/2013

PerthNow 26/03/2013

The Daily Telegraph 12/05/2013

The Herald Sun 15/05/2013

The Courier-Mail 03/06/2013

AdelaideNow 25/06/2013

Mobile Refactor 30/07/2013

The Mercury 29/08/2013

The Australian 15/09/2013

Townsville Bulletin 09/10/2013

Cairns Post 16/10/2013

Geelong Advertiser 30/10/2013

Gold Coast Bulletin 13/11/2013

NT News 27/11/2013

Weekly Times 10/12/2013

40 Days

34 Days3 Days

14 Days17 Days

26 Days23 Days

12 Days18 Days

6 Days!11 Days!!11 Days!!11 Days!!10 Days

major releases

before

http://sassmeister.com/gist/7920840

after

http://sassmeister.com/gist/7921332

http://github.com/indieisaconcept

@indieisaconcept

http://github.com/indieisaconcept/grunt-styleguide

http://github.com/indieisaconcept/grunt-feature

jonathan.barnett@news.com.au

We’re hiring