FROM MESS TO .SCSS
http://bit.ly/1h2w7qv
http://bit.ly/1fmLvNM
{ 75% }
500
Why Sass?
CSS
.css

SASS
.scss

IMPORTS
VARIABLES
FUNCTIONS
EXTENDS
SPRITE GENERATION

*

via compass
$Variables
guarded assignment

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

http://sassmeister.com/gist/7909423
mutable

http://sassmeister.com/gist/7909662
namespaces

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

http://sassmeister.com/gist/7910953
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
major releases
Leader

16/01/2013

NewsLocal

30/01/2013

PerthNow

26/03/2013

The Daily Telegraph

12/05/2013

The Heral...
before

http://sassmeister.com/gist/7920840
after

http://sassmeister.com/gist/7921332
@indieisaconcept

http://github.com/indieisaconcept
http://github.com/indieisaconcept/grunt-styleguide
http://github.com/i...
We’re hiring

jonathan.barnett@news.com.au
From mess to .scss
From mess to .scss
From mess to .scss
From mess to .scss
From mess to .scss
From mess to .scss
From mess to .scss
Upcoming SlideShare
Loading in …5
×

From mess to .scss

640 views

Published on

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

2 Comments
0 Likes
Statistics
Notes
  • http://www.youtube.com/watch?v=7xnA7WIpTq4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Will attempt to a detailed transcript, and will add youtube video once available
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
640
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
5
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

From mess to .scss

  1. 1. FROM MESS TO .SCSS http://bit.ly/1h2w7qv
  2. 2. http://bit.ly/1fmLvNM
  3. 3. { 75% } 500
  4. 4. Why Sass? CSS .css SASS .scss IMPORTS VARIABLES FUNCTIONS EXTENDS SPRITE GENERATION * via compass
  5. 5. $Variables
  6. 6. guarded assignment http://sassmeister.com/gist/7909423
  7. 7. guarded assignment http://sassmeister.com/gist/7909423
  8. 8. mutable http://sassmeister.com/gist/7909662
  9. 9. namespaces http://sassmeister.com/gist/7910768
  10. 10. namespaces http://sassmeister.com/gist/7910953
  11. 11. naming conventions ${ component }-{ type }-{ property } $module-base-font $module-base-font-size $module-base-font-color
  12. 12. variable smell
  13. 13. the result
  14. 14. the result
  15. 15. the result
  16. 16. { 500 } 32
  17. 17. 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
  18. 18. before http://sassmeister.com/gist/7920840
  19. 19. after http://sassmeister.com/gist/7921332
  20. 20. @indieisaconcept http://github.com/indieisaconcept http://github.com/indieisaconcept/grunt-styleguide http://github.com/indieisaconcept/grunt-feature
  21. 21. We’re hiring jonathan.barnett@news.com.au

×