Just kidding about the Internet breaking, One of our front-end developers, Joe Snell, was one of the many front-end development experts surveyed by the site PSDtoWORDPRESS for this CSS Preprocessors article.
Check it out! You’ll learn about the history of HTML, what preprocessors are, why they’re used and which preprocessors are best.
Here’s what Joe had to say about not breaking the Internet:
Using Sass (scss) for preprocessing css is like having developer super powers. One of the best things for someone using Sass for the first time is that you don’t need to learn or do anything different. It will work perfectly with regular old css. The big advantage with using it, however, is that it can help speed up your workflow, minimize your css payload and help to better organize your output.
The primary advantages I find with using Sass are global variables, mixins, extends, css organization, and nesting (done correctly).
Global css variables are amazing. For example, you can set your color, font, padding variables in a ‘variables’ file. From there, you can declare these variables throughout your stylesheets. That way, should you decide to change your primary color, for example, you only need to do so in one place and it automatically cascades throughout your project.
Mixins are another super useful component of using Sass. You can think of mixins as kind of like css functions. As Sass compiles, wherever these functions are declared they run, ouputting your desired css. Whenever looking for Sass resources, I recommend seeking the writings of the Sass master Hugo Giraudel. On mixins, he has written a nice article to get you started:http://www.sitepoint.com/sass-mixins-kickstart-project/.
Extends are base classes you can use throughout your project. The can be very useful (used correctly). For example, you can have an extend ‘%btn-primary’ and use those styles on classes throughout your project by using @extend %btn-primary. This can be particularly useful with classes you don’t want to populate your css file, but want to have access to when you need them – like grid styles.
CSS organization is huge. There a few different philosophies on how to do it exactly, but having the ability to group your css into bite-sized files makes maintenance and organization a snap. Instead of styling one huge css file, you now have small files based on structure, components, layout, whatever where you can easily find and modify. When you compile, Sass will pull all these files into a single css file and, depending on the tool you use to compile, output a minified version. Again, here is a link from Hugo:http://www.sitepoint.com/architecture-sass-project/.
Finally, there is nesting. Withs Sass, you can nest classes within a primary class. This can help keep your css organized and limit the need to use parent and/or repeating selectors. Limit nesting, however. Limit it to three levels as Chris Coyier points out in his Sass style guide: http://css-tricks.com/sass-style-guide/. One of the best uses I’ve found for nesting has been made available in the latest Sass release that better enambles BEM organization.
There are a few other notes when using Sass. First, you will need a tool to compile. I use Grunt, but there are others such as CodeKit and Gulp. Also, there are helper frameworks that have built in mixins and other resources that can help make your Sass expereince a little easier. The most popular are Compass and Burbon. I don’t recommend using these tools to do your vendor prefixing, however. If you use something like Grunt, I recommend using autoprefixer for that.
If you aren’t already using Sass, start using it today! You will be glad you did.
Image from flickr user epavletic.