More about CSS Preprocessors

What Are CSS Preprocessors?

CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years. 3 of the more popular css preprocessors are Sass, LESS, and Stylus

Because they aren’t css, they aren’t bound by the limitations of css.The preprocessed language can give you more functionality than css as long as it eventually makes sure everything is output as css and works in a browser like we expect.

Preprocessors offer more than variables of course. They can offer whatever they want as long as the resulting css file they produce works as ordinary css.

Risks:

At the same time there are potential issues to using a preprocessor, which keeps some away. The main issue is that everyone working on the site needs to be using the same preprocessor. Part of your team couldn’t work in Sass while the some others use LESS and others still edit the css files directly.

Which CSS Preprocessor Should You Use?

That’s really up to you. To be honest I don’t know the different languages well enough yet to offer reasons why one is better than another.

Sass, using the .scss syntax

Less, using .less syntax

Less Vs Sass

The only learning curve is the syntax. You should use an app like CodeKit,LiveReload, or Mixture to watch and compile your authored files. You need to know jack squat about Ruby or the Command Line or whatever else. Maybe you should, but you don’t have to, so it’s not a factor here. The fact that Sass is in Ruby and LESS is in JavaScript is of little consequence to most potential users.

How Do CSS Preprocessors Work?

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;}

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;
}

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;}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s