6 Reasons You Should Use a CSS Preprocessor

Kyle HenwoodWeb Development4 Comments


So you’ve probably heard of CSS preprocessors before, be it Sass, Less, Scss, Stylus, they’re all great.

Personally I use Scss, I’ve found it really helpful that I could copy and paste my original CSS into a Scss file and work from there. (Scss can be written just like plain CSS).

I’m no expert on the others, but they are all quite similar, so I thought I’d share a couple of reasons why I love them, and why you should give them a try if you haven’t already!

1. $variables

“What was the hex value of of that color again?” I remember when I’d scroll back through my CSS to try and find the exact color I used for a certain button. With Sass you can assign CSS values to variables, meaning that annoying hex color #91ea42 can now be set as a variable for you to re-use whenever you want, and if you want to change said color, all you have to do is update the variable in one place and it’s updated everywhere!

This is easily one of the greatest features of a CSS preprocessor.

2. @imports

You may be thinking – “But CSS has @import already!” Which it does, but it works a little differently, let me explain:

CSS @import makes another http request to fetch another stylesheet, while a Sass @import grabs the content from inside your imported file and includes it within the compiled stylesheet. This means only one http request, allowing you to create partials and organize your css just that little bit better without any downsides!

3. @mixins

Mixin’s can be quite daunting at first glance, but in reality they work similar to a simple javascript function, and can be used for some pretty clever things. You can write them to accept variables or when there are no variables passed. Anything which helps you write less code is great in my book.

4. @extend

one of the more interesting features of Sass, this lets you attach one class’ attributes to another class. Here’s an example of it in action:

5. Math!

An awesome little tidbit I use every now and again, you can also use addition (+), subtraction (-), multiplication (*) and division (/). I’ve found this really useful when positioning content around a sticky navigation, I can keep the navigation’s height in a variable, and adjust how far the content appears down the page based from the navigation’s height.

6. Loops

I just couldn’t leave this one off the list. I haven’t found myself needing this functionality all that often, nonetheless it is awesome. Scss lets you write loops that you can iterate through to create classes directly from variables and other whacky things.

Most loops statements are available; @each, @for and @while are all supported.

Thats a wrap!

I’ve found Scss really helped me with CSS maintainability, and anything which allows me to write less code is going to be worth doing!

“But you didn’t include X”, I hear you cry! There’s plenty of stuff I glanced over such as Boolean’s and other cool stuff, but that’s ok, my goal was to convinced you to give one of these amazing tools a shot if you haven’t already.

Are you a front-end developer? You can get insights into software problems alongside your team with Raygun. We support all major programming languages including Javascript. Check out our free 14 day trial and start blasting software bugs in record time!

Next level software intelligence across your entire stack.

4 Comments on “6 Reasons You Should Use a CSS Preprocessor”

  1. Pingback: CSS Pre-Processors The Good and The Bad | dudeblogweb

  2. Pingback: The Pros and Cons of using CSS Pre-Processors – Process Blog

  3. Pingback: Sass tutorial: A first look at writing more maintainable styles with Sass

  4. Pingback: Pros & Cons of CSS Pre Processors – Site Title

Leave a Reply

Your email address will not be published. Required fields are marked *