At An Event Apart – Austin 2013, Chris Coyier shared his thoughts on CSS Preprocessing, specifically SASS. Here are my take-aways:
- CSS as a language is not as ‘abstracted’ as it could be, and so preprocessing serves to solve this.
- Preprocessing involves writing variables, mix-ins which are sets of variables, extends, and other short-hand ways to make writing CSS quicker. Rachel Nabors explains variables, extends and mix-ins here
- also involves nesting css styles in a more logical way
- Some additional software can help with writing CSS3 in SASS, such as Compass and AutoPrefixer (a postprocessor)
- Ways to convince your team:
- Preprocessing simplifies the process
- Allows for consistency
- Makes CSS prefixes a breeze
- Makes your site faster
- How to transition to SASS:
- CSS files are technically valid SCSS files so you can start renaming files to .scss and import them into a global.css
- Begin by replacing common colors with variables. Just like this.
- Also begin by nesting a related thing. Just like this.
- Learning the SASS syntax really takes about an hour
- Final thought: CSS is meant for computers to understand – so lets make it more productive to write it by preprocessing!
- Earlier this year, I signed up for Chris Coyier’s video-learning section of his website called, The Lodge. In it, he has a video series where he redesigns his blog, css-tricks.com. He uses SASS throughout and it was really eye-opening to see it in action throughout the full redesign process. Besides learning SASS techniques, I picked up 100+ new tricks/tips for writing html/css and how to approach website layout (especially how to troubleshoot issues). It’s great to see how another developer builds things and ‘compare notes’.
Leave a reply