What is a CSS Preprocessor

By Alyssa Schaad

What is a CSS Preprocessor?

A CSS preprocessor is a scripting language that extends CSS and is compiled into regular CSS syntax. A browser can only understand CSS, which at times may not be enough to write clean and reusable rules. Using only CSS, the designer/developer is not able to reuse a collection of rules in multiple selectors which had unclear pieces of data across a stylesheet. To overcome most of these limitations, the concept of a preprocessor was created. It offered an advanced way of writing CSS that extends the basic functionalities. This advanced code is later compiled as normal CSS code that the browser will understand.

What is the difference between popular preprocessors?

Sass vs LESS vs Stylus

There are three main preprocessors – Sass, LESS and Stylus. Each CSS preprocessor has its own unique way of accomplishing the same task, even though about 80% of Sass, LESS and Stylus are the same. The other 20% is made up of minor differences in the advanced usage.

All three preprocessors allow you to create variables, media queries, mixins, nesting, loops & conditionals and importing. All three let you abstract key design elements, use logic and write less code, which makes them all able to give you an advantage over basic CSS.

The differences (the 20%)

Sass

Sass was built on Ruby and has frameworks like Gumby and Foundation. Sass also has great mixin libraries such as Compass and Bourbon. A few differences Sass has versus LESS and Stylus are @extend, @media and @content. @extend lets you share a set of CSS properties from one selector to another. @media lets you use media queries right inside of the nesting allowing you to target specific screen sizes. With @content, it is possible to pass a block of styles to the mixin for placement within the styles included by the mixin. The styles will appear at the location of any @content directives found within the mixin.

SCSS

SCSS is like Sass, but is closer to regular CSS. SCSS is fully CSS compliant, meaning you can import regular CSS into a SCSS file, and it will work immediately. This is nice if you’re borrowing something from CSS, and it’s clean and well written, and it’s not in your best interest to take the time to re-write everything.

LESS

Less runs inside Node Javascript, in the browser. The main difference between LESS and other CSS preprocessors is that LESS allows real-time compilation via less.js in the browser. With Sass or Stylus, when creating a mixin you create a group of CSS declarations, but in LESS you embed the mixin into the property of a class.

Stylus

Built on node.js, Stylus really strips down all of the extra characters that clog up your CSS. Stylus allows freedom in terms of syntax – you can omit braces, semicolons and even colons. Stylus incorporates powerful in-language functions and conditionals.

If you need help with your Magento store, call 845-656-3000 or Contact us here »

5 Reasons to use a CSS Preprocessor

(the following examples are using SCSS)

It will make your code easier to maintain You will be able to create variables, mixins and functions that are declared at the beginning of the document which will make simple changes, like a color, easier to maintain. For example, you declare a variable for your primary color and secondary color:
```
$primary_color: #346699; 
$secondary_color: #769bc0;
```
And then you can use it like this:
```
a{color: $primary_color;}
nav{background-color: $secondary-color;}
```
Which will output the CSS as:
```
a{color: #346699;}
nav{background-color:#769bc0;}
```
So now, if you want to change the primary color to orange, you would only have to change the color declared in the variable and the preprocessor will automatically change all instances of that color outputted to the CSS.
It will make your CSS DRY DRY as in Don’t repeat yourself (as opposed to WET, Write everything twice). Don’t repeat yourself is a main principle of computer programming. How often have you written something like this in CSS?
```
.main-heading{
```
font-family: Tahoma, Geneva, sans-serif; font-weight: bold; font-size:20px; text-transform: uppercase; color: blue;
```
}

.secondary-heading{
```
font-family: Tahoma, Geneva, sans-serif; font-weight: bold; font-size:16px; text-transform: uppercase; color: blue;
```
}
```
Written in SCSS:
```
.main-heading{
```
font-family: Tahoma, Geneva, sans-serif; font-weight: bold; font-size:20px; text-transform: uppercase; color: blue;
```
}

.secondary-heading{
```
@extend .main-heading; font-size:16px;
```
}
```
Using @extend in SCSS will share a set of CSS properties from one select to another. It helps keep your SCSS very DRY.
It will make your CSS more organized Both Sass and LESS support nested definitions. This is an excellent feature and keeps things organized. After you start writing your css definitions this way, you will realize how repetitive the old way was. Consider the following example:
```
h2{
```
font-family:Helvetica, Arial, sans-serif; font-size:20px; text-transform:uppercase; a { color:blue; } &:hover{ text-decoration:underline; color:green; }
```
	
}
```
Which just makes more sense than this:
```
h2 {
```
font-family: Helvetica, Arial, sans-serif; font-size: 20px; text-transform: uppercase;
```
}

h2 a {
```
color: blue;
```
}

h2 a:hover {
```
text-decoration: underline; color: green;
```
}
```
It will save you time. You will be impressed at how much time you will save when you aren’t forced to write the same code over and over again. We can all use a little more free time.
It’s fun! Really, go try it out! See which one is your favorite.

Alyssa Schaad

Support Operations Manager

What is a CSS Preprocessors & Why Use Them