2. About me
EAT DIMANCHE
➢ Web Project Coordinator
at Web Essentials
➢ Graduated from Puthisastra
University
➢ dimanche@web-essentials.asia
➢ http://fb.com/dimanche.eat
@Barcamp 2012 Save time by using SASS 2
3. Agenda
➢ Introduction
➢ Boring parts
➢ CSS Enhancements
➢ Installation
➢
Demo
➢ Questions
@Barcamp 2012 Save time by using SASS 3
4. Introduction
➢ Sass is a meta-language on top of CSS that’s
used to describe the style of a document cleanly
and structurally, with more power than flat CSS
allows.
➢
Sass both provides a simpler, more elegant syntax
for CSS and implements various features that are
useful for creating manageable stylesheets.
@Barcamp 2012 Save time by using SASS 4
5. Boring parts
➢
Mixed up formating
@Barcamp 2012 Save time by using SASS 5
6. Boring parts
➢
Mixed up color
@Barcamp 2012 Save time by using SASS 6
7. Boring parts
➢
Duplication
@Barcamp 2012 Save time by using SASS 7
8. Boring parts
➢
Long selectors
@Barcamp 2012 Save time by using SASS 8
9. Boring parts
➢
@import
@Barcamp 2012 Save time by using SASS 9
10. CSS Enhancements
➢
SCSS will be compiled to CSS
@Barcamp 2012 Save time by using SASS 10
11. CSS Enhancements
➢
Nesting
@Barcamp 2012 Save time by using SASS 11
12. CSS Enhancements
➢
Parent reference
@Barcamp 2012 Save time by using SASS 12
13. CSS Enhancements
➢
Variables
@Barcamp 2012 Save time by using SASS 13
14. CSS Enhancements
➢
Operators and functions
@Barcamp 2012 Save time by using SASS 14