css preprocessors
DESCRIPTION
Talk on CSS Preprocessors at Hogeschool Rotterdam (1 february 2013) during the MT Meetup. Full schedule: https://joind.in/event/view/1203TRANSCRIPT
![Page 2: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/2.jpg)
CSS WHAT??“ CSS preprocessors take code written in
the preprocessed language and thenconvert that code into the same old css
we’ve been writing for years. ”
![Page 4: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/4.jpg)
USAGE
![Page 5: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/5.jpg)
TYPE OF PREPROCESSOR
![Page 6: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/6.jpg)
LESS IS MORE...what about SASS?
![Page 7: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/7.jpg)
POWER OF PREPROCESSORS!1. Nesting2. Variables !!!!3. Mixins !!!!4. Inheritance !!!!5. many many more....
![Page 8: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/8.jpg)
1. NESTING
![Page 9: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/9.jpg)
![Page 10: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/10.jpg)
2. VARIABLES
![Page 11: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/11.jpg)
3. MIXINS
![Page 12: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/12.jpg)
![Page 13: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/13.jpg)
4. INHERITANCE
![Page 14: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/14.jpg)
HANDS ON!!!
![Page 15: CSS Preprocessors](https://reader033.vdocuments.net/reader033/viewer/2022060111/5562c212d8b42aaf178b4c04/html5/thumbnails/15.jpg)
MISCONCEPTIONSFaster CSSCleaner CSS → development vs productionLESS requires JavascriptSASS runs on the command line → tools!