Preprocessors: An Overview

An overview of preprocessors as presented to the Startup Institute Summer 2015 class.

Transcript

1. CSS Preprocessors June 10, 2015 & June 13, 2015 http://www.kevingottuso.com/better-together/
2. Hi! I’m Paul Demers @demersdesigns / demersdesigns.com cantina.co
3. What is a Preprocessor? • A syntax and group of patterns to extend the capabilities of CSS. • Allows the creation of programatic CSS • Use compilers to output standard CSS that the browser can understand
5. Preprocessor Features • Partials- include one file in another using import • Nesting - put css rules inside other css rules • Variables - reusable declarations • Mixins - reusable snippets and functions
6. Partials
7. Nesting
8. Variables
9. Mixins
10. Issues to Consider • Can bloat the CSS that it outputs • Need other team members to adopt preprocessor workflow • Another language to learn • Additional processing necessary to write site styling
11. CodeKit Prepros Grunt/Gulp/Brunch
12. Let’s Do This! • Learn Sass • Learn LESS • Learn Stylus • Getting Started with Preprocessors • Baseplate project on GitHub
13. Questions?