Sriharsha Sistalam
Project manager at D.E.Shaw India. Interested in front end, distributed systems, micro services.
Sriharsha Sistalam
What and Why?
Features
Which one to choose?
Case studies
Demo and Q&A
- 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..)
A way to reuse CSS (variables, functions, modules etc...)
Ability to easily extend "components"
- 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
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.
Extends:
Let's you extend something simillar to OOP.
Imports:
Just like java imports, include a component, library etc..
Control statements:
Ifs, else, while, for loop etc..
- SASS (Syntactically Awesome Style sheets)
- SCSS (Sassy CSS)
- LESS
- Stylus
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
}
DESFlow uses SCSS to write lot of reusable components, extend foundation styles and add themes
References:
Thank you
By Sriharsha Sistalam
A quick introduction to CSS preprocessors.
Project manager at D.E.Shaw India. Interested in front end, distributed systems, micro services.