How to use CSS preprocessor

CSS preprocessor is quite popular and set to be a common arsenal in web developer toolset. But how do they work ?

First, if you are not familiar with CSS preprocessor, here is some idea on why you should be using it :

There are various reasons why CSS preprocessors can be a valuable tool in our development process. First, they don’t break browser compatibility; LESS, Sass and Stylus are all valid CSS and vice versa. Another advantage is preprocessors make our CSS DRY (Don’t Repeat Yourself) by allowing us to create variables from reusable CSS properties, which makes our code more modular and scalable, so our CSS doesn’t get out of hand and become difficult to manage.

Preprocessors save us time and do a lot of the tedious stuff for us because they have all the neat features we wish plain vanilla CSS had, like nesting selectors, math functions, referencing a parent selector, even reporting errors by telling us where and why there are errors in our code.

Source: Team Tree House blog

Well, they extend on CSS by adding variables, which is good enough reason for most developer to use it.

And they allow mathematical calculation to be done. With the changing mobile device width and height, this is important.

Next, it allows Mixins and nesting. Mixins is a method that allows easy reuse for blocks of code. Nesting allows attaching elements styling to a parent element.

Of course, the best way is to learn yourself. A great illustration for this is located in the vanseo design Sass And LESS: An Introduction To CSS Preprocessors with excerpt I extracted below :

How Do CSS Preprocessors Work?
Like I said above I’m working on a more detailed demo, but I wanted to show a few quick basics for working with css preprocessors. Below are a few of the very basics. I’ll show you code in both Sass (.scss syntax) and LESS and what the css output would look like.

Variables — alone are enough for me to give preprocessors a try. It should be obvious that changing the value of a variable once is much more maintainable than changing the many instances of it’s value spread over a css file.

1
2
3
4
5
6
7
8
9
10
/* -- .scss --  */
$color: #efefef;
body {background:  $color;}

/* -- .less -- */
@color: #efefef;
body {background:  @color;}

/* -- resulting css -- */
body {background:  #efefef;}

Hopefully you can see how much more maintainable it is to use the variable as you could update a color scheme across your entire site by changing a handful of variables.

Interpolation — expands on variables in that you aren’t limited to the values of css properties.

1
2
3
4
5
6
7
8
9
10
11
12
13
/* -- .scss --  */
$side: top;
border-#{$side): 1px solid #000;

/* -- resulting css -- */
border-top: 1px solid #000;

/* -- .less -- */
@base-url: "http://example.com";
background-image: url("@{base-url}}/images/bg.png");

/* -- resulting css -- */
background-image: url("http://example.com/images/bg.png");

Operations — come in handy, especially as we’re moving toward web design and development based on proportions over fixed measurements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* -- .scss --  */
$navbar-width: 800px;
$items: 5;
#navbar li {width: $navbar-width/$items - 10px;}

/* -- resulting css -- */
#navbar li {width: 150px}

/* -- .less -- */
@base-color: #111;
#header {color: @base-color * 3;}

/* -- resulting css -- */
#header {color: #333;}

Both languages take this further by offering functions such as lighten(@base-color, 10%) in LESS. A similarly named function exists in Sass and there are many more functions in both languages.

Mixins — allow for the easy reuse of blocks of code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* -- .scss --  */
@mixin rounded-corners {
  $radius: 5px;

  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

#navbar li { @include rounded-corners; }
#footer { @include rounded-corners; }

/* -- .less -- */
.rounded-corners  {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {.rounded-corners;}
#footer { .rounded-corners;}

/* -- resulting css -- */
#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

#footer {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

LESS does things a little differently here. The initial mixin is a regular css class that later gets added where you want. My understanding is this isn’t the ideal way to handle mixins, but I don’t yet know enough to agree or disagree.

Nesting — One last thing I’ll mention is how both Sass and LESS allow for nested formatting and they work in the same way. Notice how the list, list items, and link are nested within #navbar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* -- .scss or .less -- */
#navbar {
  width: 80%;
  height: 25px;

  ul { list-style: none; }

  li {
    float: left;
    a { text-decoration: none; }
    &:hover { text-decoration: underline; }
  }
}

/* -- resulting css -- */
#navbar {width: 80%; height: 25px;}
#navbar ul {list-style: none;}
#navbar li {float: left;}
#navbar li a {text-decoration: none;}
#navbar li a:hover {text-decoration: underline;}

So, why not give it a try. Two very popular preprocessor are LESS and SASS, as vanseo design used in the example above.