An Introduction to CSS Preprocessors
Sriharsha Sistalam
Agenda
What and Why?
Features
Which one to choose?
Case studies
Demo and Q&A
Why CSS sucks?
- Difficult to maintain
- Nesting hell
- No reuse at all (DRY principle)
- Dificult to extend libraries (jquery UI etc..)
- Manual task to maintaining browser prefixes (advanced CSS..)
What we need?
A way to reuse CSS (variables, functions, modules etc...)
Ability to easily extend "components"
What does CSS preprocessors offer?
- Variables for colors, pixel values etc..
- Functions for handling repetitive jobs
- Nesting
- Extends (hey Inheritence!)
- Math operators
Functions:
Like number general purpose functions, they exist to handle repetitive use-cases.
Many CSS preprocessors comes with variety of default functions
Features
Features
Variables
Can be used to store any value: String, Integer, Color codes etc..
Mixins: (Partials)
Like functions but they 'include' the content rather than 'return'ing them.
Features
Extends:
Let's you extend something simillar to OOP.
Features
Imports:
Just like java imports, include a component, library etc..
Features
Control statements:
Ifs, else, while, for loop etc..
Features
Which one?
- SASS (Syntactically Awesome Style sheets)
- SCSS (Sassy CSS)
- LESS
- Stylus
Which one is right for me?
Depends a lot of team/work culture, build setup and personal preference!
if(i hate semicolons or brackets){
'use sass' => Ruby
} elseif (something simillar to css) {
'use scss' => Ruby
} elseif(something in js){
'use LESS' => nodejs
}Case study
DESFlow uses SCSS to write lot of reusable components, extend foundation styles and add themes
Case study
Demo
References:
Thank you
