6 Reasons You Should Use a CSS Preprocessor

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.

// variable
$color-green: #91ea42;

.text-green {color:$color-green;}
.button-green {background:$color-green;}

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!

// shared modules
@import 'modules/_module-1';

// view specific css
@import 'views/_home';
@import 'views/_features';

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.

//mixin
@mixin transition($property:all 200ms linear) { //

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:

.button {
 display: block;
 border-radius: 3px;
 padding: 16px;
}

.button-green {
 @extend .button;
 color: $text-light;
 background: $color-green;
}

// compiles to
.button,
.button-green { //

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.

// variable
$nav-height: 60px;

// navigation positioning
body {
  padding-top: $nav-height+40px;
}

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: $nav-height;
}

// how many SF should I keep 33.333333....%? I don't know anymore.
.one-third {
  width: (100%/3);
}

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.

// #{$variable}  is used to strip the brackets and dollar sign from a variable
// allowing me to generate a class using the variable name.

// social media colors
$facebook: #3b5998;
$twitter: #4099FF;

$social-media-colors:$facebook,$twitter;

// social media color loop
@each $color in $social-media-colors {
  .color-#{$color} {
    background-color: $color;
  }
  .text-#{$color} {
    color: $color;  
  }
}

//compiles to:
.color-facebook {background:#3b5998;}
.text-facebook {color:#3b5998;}
.color-twitter {background:#4099FF;}
.text-twitter {color:#4099FF;}

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!