If you’re not familiar with css preprocessors, their main benefit is that they allow you to use the same stylesheet for multiple pages (think about repeating styles for headers and footers). They also let you use variables, mixins and functions.
In this post, we’ll cover some of the benefits of using a css preprocessor and why you should consider embracing one in your next project.
CSS Preprocessors are not new. LESS was first released in 2009, Sass in 2006 and Stylus a year later. A lot of people have already written about them (some examples here, here and here) but I believe that there are still a lot of people out there who still don’t use them or know what they do.
I’m not going to play judge on which one is better or which one you should use because I really couldn’t care less. I currently use LESS as that’s what I started with but I’ve had experience with Sass as well and while they have slightly different syntax they both accomplish the same thing (quite well too). In this post we’ll be using LESS syntax but Sass users shouldn’t have trouble following along.
Over the last couple of years, CSS Preprocessors have quickly become one of the de-facto tools for any serious web developer. The most popular ones include Sass (written in Ruby), LESS (written in JavaScript) and Stylus (also written in JavaScript).
If you are yet to embrace CSS Preprocessors, I would strongly recommend at least giving it a try. In this article, I’ll discuss why and when you should use preprocessors, what they can do and how they will help you write cleaner, modular and more maintainable CSS.
CSS Preprocessors are tools which extend the default capabilities of CSS by allowing developers to write code in one language (e.g. Sass or LESS) and then compile it into standard CSS. This compilation step gives us access to all sorts of useful features like variables, mixins and functions which make writing CSS quicker, easier and more enjoyable.
When I started developing websites, CSS was a simple language. It wasn’t exactly simple to master, but the language itself didn’t present many challenges. But as browsers started to support more and more properties and as the demand for complex designs increased, CSS became more complex, and writing efficient and maintainable code became challenging.
CSS preprocessors help us overcome those challenges. They add much-needed programmatic functionality to our stylesheets, such as variables, functions, imports, conditionals, math operations and even loops.
Preprocessors also help us modularize our stylesheets so they are easier to maintain. We can group all of our project’s reset rules in a single file, all of our typography rules in another file and all of our form rules in yet another file. This makes it easy for large teams to work on large projects without stepping on each other’s toes.
These advantages have made preprocessors quite popular among web developers over the last few years. In fact according to this survey by Net Magazine almost half of all professional web developers use one or more preprocessor(s).
If you haven’t heard about CSS preprocessors and all their benefits, you should definitely give them a try. If you’re on the fence about whether or not to use one, I’m hoping this article will convince you to finally take the plunge.
Why Use a Preprocessor?
A preprocessor is basically a scripting language that allows us to create variables, mixins, functions, loops and other programming concepts which we can then compile into regular CSS syntax. That means we can use preprocessors to write simpler and more reusable code.
Preprocessors help us work faster and more efficiently by making our code easier to read and maintain. We can write cleaner code by organizing it into smaller files which are easier to understand and debug.
I’ll be focusing on three of the most popular preprocessors: Sass (Syntactically Awesome Stylesheets), Less (Leaner Style Sheets) and Stylus. In my opinion these three are the best choices available right now because they have an excellent syntax, are actively maintained, enjoy large communities and are used extensively in production.
Nowadays, a lot of people are talking about CSS preprocessors and how awesome they are. I’m going to take the opportunity to tell you why I think it’s worth embracing a CSS preprocessor (I’ll use LESS as an example) and some of the benefits it brings me.
When I first read articles about LESS/SASS, I thought that it was just a matter of adding some extra features on top of CSS, but after using SASS for a while and playing with LESS, I realized that this is not 100% true.
They’re different languages that compile into CSS.
Less is simply the name given to the language; so when you write less code, it gets compiled into regular CSS code. It means that the browser will read your Less code as if it was normal CSS. And before running your stylesheet through Less’ compiler, you need to convert it into plain CSS, which will be sent to the browser.
As we said before, Less is not just an extension of CSS because it comes with new features such as variables, mixins, operations and nested rules. Let’s take a look at some advantages this brings us over plain vanilla css:
In the mid-2000s, CSS was regarded as a difficult, if not impossible, language to manage at scale. In response to this challenge, a group of talented developers invented the CSS preprocessor.
What is a preprocessor?
A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Preprocessors are very popular and have a number of benefits – e.g., variables, mixins, nesting and functions. They can reduce repetition, increase maintainability and improve compatibility by extending the existing language.
The most popular of these preprocessors is Sass (Syntactically Awesome StyleSheets), but there are others:
Less
Stylus
PostCSS
Myth
Preprocessors are often compared against minification – the process of removing all unnecessary characters from code to reduce its size thereby improving load times. As you can see below there is no comparison between the two:
I’ve been using Sass for a while but I am still new to it and have not yet used any of the mixins that are out there. It seems like a lot of people just create a mixin with all of their vendor prefixes which is fine, but it seems like it would be even better if you could just use the mixin once and add the property and value as variables inside of it so that you don’t have to write everything out three or four times.
Here’s what I mean:
This is how you could do it currently:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
and then call it like this:
.box { @include border-radius(10px); }
I was wondering if something like this would be possible. So that you wouldn’t actually have to write the property names out at all. I tried using lists, but couldn’t get them to work right. The closest I got was this:
@mixin prefix($property, $value) {