10 Reasons to Use a CSS Preprocessor

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

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

I thought I’d share a couple of reasons why they’re so useful, and why you should give them a try if you haven’t already!

1. $variables

“What was the hex value of that color, again?” I remember when I’d scroll back through my CSS to try and find the exact color of 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 reuse whenever you want. 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

Mixins 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 arguments, however they work without them as well. Anything which helps you write less code is great in my book.

// mixin  
@mixin transform($property: scale3d(2, 1.5, 0.5)) {
	-webkit-transform: $property;
	-ms-transform: $property;
	transform: $property;
}

// include mixin
div {
	@include transform();
}

4. @extend

One of the most interesting features of Sass, the @extend rule lets you attach the properties of a class to another class. It brings inheritance right into your stylesheet. Here’s an example of it in action:

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

.button-green {
	@extend .button;
	color: #ffffff;
	background: #91ea42;
}

It compiles to:

.button, .button-green {
	display: inline-block;
	border-radius: 3px;
	padding: 16px;
}
.button-green {
	color: #ffffff;
	background: #91ea42;
}

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 store the height of the navigation in a variable, then adjust how far the content appears down on the page based on that height value.

// 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.

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

$colors: (
	"facebook": $facebook,
	"twitter": $twitter
);

// social media color loop
@each $key, $color in $colors {
	// #{$variable} is used to strip the brackets and dollar sign from a variable
	.color-#{$key} {
		background-color: $color;
	}
	.text-#{$key} {
		color: $color;
	}
}

It compiles to:

.color-facebook {
	background-color: #3b5998;
}
.text-facebook {
	color: #3b5998;
}
.color-twitter {
	background-color: #4099ff;
}
.text-twitter {
	color: #4099ff;
}

7. Nesting

Nesting is another amazing feature of CSS preprocessors. It allows you to nest child selectors within their parent selector. This means you can store all style rules belonging to the same parent or grandparent right under each other. Nesting can do wonders for code readability, believe me!

// navigation
nav {
	ul {
		list-style: none;
	}
	li {
		display: inline-block;
	}
	a {
		display: block;
		text-decoration: none;
		padding: 0.5rem;
		:hover {
			text-decoration: underline;
		}
	}
}

8. Pre-built Functions

Preprocessors also come with pre-built functions making it easier to manipulate your code. Think of tricky things you’ve always wanted to do, such as making a color lighter or darker, converting it to grayscale, generating a random number, and many more. With CSS preprocessors, common functionalities like these aren’t an issue anymore!

// complement color function
$color: #91ea42;

div {
	color: $color;
	background-color: complement($color);
}

9. Frameworks & Libraries

The developer community has built a huge ecosystem around CSS preprocessors as well. You definitely should take leverage of some of these awesome tools! Just think Bootstrap that recently moved from LESS to Sass, or Foundation that’s also incredibly popular and not without a reason! And, I’m sure you’ll love mixin libraries like Compass or Bourbon with all their ready-made goodies, too!

10. Code Optimization

So, wanna optimize stylesheets? Then, CSS preprocessors are the way to go! They have some learning curve for sure, but once you pick up the syntax you’ll notice how much time you save. You’ll use fewer repetitions and debugging will also be much easier! Oh, and did I mention how much easier it’ll be to read and make sense of someone else’s code?

That’s 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 glossed over here, such as Booleans and other cool stuff, but that’s ok, my goal was to convince you to give one of these amazing tools a shot if you haven’t already.