from mess to .scss
DESCRIPTION
An overview of how Sass has become integral to the Front End development work done at News Corp here in Australia. Primarily focusing on $variablesTRANSCRIPT
![Page 3: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/3.jpg)
{ 500 }75%500
![Page 4: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/4.jpg)
CSS SASS
IMPORTS
VARIABLES
FUNCTIONS
EXTENDS
SPRITE GENERATION * via compass
.scss.css
Why Sass?
![Page 5: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/5.jpg)
$Variables
![Page 6: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/6.jpg)
![Page 10: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/10.jpg)
![Page 13: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/13.jpg)
naming conventions
${ component }-{ type }-{ property }
$module-base-font$module-base-font-size$module-base-font-color
![Page 14: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/14.jpg)
![Page 15: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/15.jpg)
variable smell
![Page 16: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/16.jpg)
![Page 17: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/17.jpg)
the result
![Page 18: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/18.jpg)
the result
![Page 19: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/19.jpg)
the result
![Page 20: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/20.jpg)
{ 500 }32
![Page 21: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/21.jpg)
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
![Page 22: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/22.jpg)
![Page 25: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/25.jpg)
![Page 26: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/26.jpg)
![Page 27: From mess to .scss](https://reader035.vdocuments.net/reader035/viewer/2022062319/555e0cb3d8b42a99188b4be8/html5/thumbnails/27.jpg)
http://github.com/indieisaconcept
@indieisaconcept
http://github.com/indieisaconcept/grunt-styleguide
http://github.com/indieisaconcept/grunt-feature