An overview of how Sass has become integral to the Front End development work done at News Corp here in Australia. Primarily focusing on $variables

1. FROM MESS TO .SCSS
http://bit.ly/1h2w7qv

2. http://bit.ly/1fmLvNM

3. { 75% }
500

4. Why Sass?
CSS
.css
SASS
.scss
IMPORTS
VARIABLES
FUNCTIONS
EXTENDS
SPRITE GENERATION
*
via compass

5. $Variables

7. guarded assignment
http://sassmeister.com/gist/7909423

8. guarded assignment
http://sassmeister.com/gist/7909423

9. mutable
http://sassmeister.com/gist/7909662

11. namespaces
http://sassmeister.com/gist/7910768

12. namespaces
http://sassmeister.com/gist/7910953

13. naming conventions
${ component }-{ type }-{ property }
$module-base-font
$module-base-font-size
$module-base-font-color

15. variable smell

17. the result

18. the result

19. the result

20. { 500 }
32

21. major releases
Leader
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
11 Days
40 Days
34 Days
3 Days
03/06/2013
AdelaideNow
17 Days
25/06/2013
Mobile Refactor
14 Days
30/07/2013
The Mercury
23 Days
29/08/2013
The Australian
26 Days
15/09/2013
Townsville Bulletin
16/10/2013
18 Days
09/10/2013
Cairns Post
12 Days
Geelong Advertiser
30/10/2013
Gold Coast Bulletin
13/11/2013
NT News
27/11/2013
Weekly Times
10/12/2013
6 Days
!
11 Days!
!
11 Days!
!
11 Days!
!
10 Days

23. before
http://sassmeister.com/gist/7920840

24. after
http://sassmeister.com/gist/7921332

27. @indieisaconcept
http://github.com/indieisaconcept
http://github.com/indieisaconcept/grunt-styleguide
http://github.com/indieisaconcept/grunt-feature

28. We’re hiring
jonathan.barnett@news.com.au