CSS Preprocessors – What are the benefits?

Anyone who builds websites knows how time-consuming CSS (Cascading Style Sheets) development can be, but delegating the task to a CSS preprocessor can alleviate the tedium and handle the “dirty work”. Sass (Syntactically Awesome Style Sheets), Less (Leaner Style Sheets) and Stylus are the top CSS preprocessor tools used by web developers today.

Preprocessors have been around awhile – PHP (Hypertext Preprocessor) and Haml (HTML Abstract Markup Language) have literally revolutionized web development, though I’ve only become attuned to CSS preprocessors in the last couple of years. The first appearance was in 2007 with the introduction of Sass, a scripting language similar to Haml and influenced by Yaml (Yet Another Markup Language). Sass was originally coded in Ruby but has since developed PHP, Java (JSass) and C (libSass) implementations. Since Sass, others have come about, each contributing to the evolution of the others. Less was unveiled in 2009 as a javascript based preprocessor, greatly influencing subsequent Sass releases. Sass introduced a newer syntax SCSS (Sassy CSS) that closely resembles native CSS. Influenced by both Sass and Less, Stylus entered the picture in 2010 and now ranks as the third most widely used CSS preprocessor.

What is a CSS preprocessor?

A CSS preprocessor is a dynamic style sheet language that extends the rules of basic cascading stylesheets. Source code created with the preprocessor is compiled or interpreted, generating a CSS object.

Why would you want to use a CSS preprocessor?

  • To eliminate redundancy and create cleaner CSS,
  • to save time,
  • for ease of maintenance,
  • to handle repetitious “housekeeping” routines through “canned” functions (DRY – “Don’t Repeat Yourself” as opposed to WET – “Write Everthing Twice”),
  • compatibility with all browsers,
  • and last but certainly not least, to make working with CSS fun!

Capabilities

Variables – Flexibility and ease of maintenance are enhanced by the use of variables which can be declared and referenced throughout the style sheet. Sass and Less syntax is nearly identical to standard CSS while Stylus uses a simpler syntax which doesn’t require colons or semicolons as rule delimiters. Sass denotes variables by the “$” symbol as opposed to “@” used by Less. Stylus requires the equal sign for value assignments and acknowledges the “$” symbol for variables as shown in the following examples:

Sass

Sass syntax is very similar to native CSS with variables denoted by the prepended “$”.


$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;

body {
color: $mainColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}

Less

Like Sass, Less looks like regular CSS but uses the “@” symbol for its variables.


@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;

body {
color: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}

Stylus

Stylus is remarkably different with a much simpler syntax. The equal sign is necessary and the “$” denotes variables. The Stylus compiler will accept the “@”, but will not generate the correct object CSS.


mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted

body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth

Nested CSS – Reduces redundancy and provides for cleaner, better structured development.

CSS

Standard CSS is the end result of the preprocessor compile.


section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}

Sass, Less & Stylus

Nested properties are exactly the same for all 3 of our preprocessors.


section {
margin: 10px;

nav {
height: 25px;

a {
color: #0982C1;

&:hover {
text-decoration: underline;
}
}
}
}

Mixins – Are functions that can be applied to properties throughout a style sheet, reducing redundancy and duplication of effort even more.

Sass

Sass, like Less, also uses the “@” symbol but for a different purpose – mixins.


/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}

.generic-error {
padding: 20px;
margin: 4px;
@include error(); /* Applies styles from mixin error */
}

.login-error {
left: 12px;
position: absolute;
top: 20px;
@include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

Less

Less uses the “@” for mixins as well as variables.


/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}

.generic-error {
padding: 20px;
margin: 4px;
.error(); /* Applies styles from mixin error */
}

.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

Stylus

Again, Stylus uses a more simplistic approach than the other 2.


/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}

.generic-error {
padding: 20px;
margin: 4px;
error(); /* Applies styles from mixin error */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}

Functions & Operations – Math operations and functions such as inheritance are possible.

Sass, Less and Stylus

Example of basic math operations


body {
margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}

Sass and Stylus

Inheritance example.


.block {
margin: 10px 5px;
padding: 2px;
}

p {
@extend .block; /* Inherit styles from '.block' */
border: 1px solid #EEE;
}
ul, ol {
@extend .block; /* Inherit styles from '.block' */
color: #333;
text-transform: uppercase;
}

Less

Less inheritance example.


.block {
margin: 10px 5px;
padding: 2px;
}

p {
.block; /* Inherit styles from '.block' */
border: 1px solid #EEE;
}
ul, ol {
.block; /* Inherit styles from '.block' */
color: #333;
text-transform: uppercase;
}

CSS equivalent

The compiled results produce this CSS.


.block {
margin: 10px 5px;
padding: 2px;
}
p {
margin: 10px 5px;
padding: 2px;
border: 1px solid #EEE;
}
ul,
ol {
margin: 10px 5px;
padding: 2px;
color: #333;
text-transform: uppercase;
}

There are many more functions such as Color, 3D Text and Importing, too many functions to be discussed in this article, but you can find more in-depth documentation here.

Usage/Installation – Original Sass uses Ruby, which is installed from a command prompt, whereas the script version, libSass, can be installed using the Compass framework or other 3rd party tools. Less and Stylus are installed using “npm” in the command prompt after first installing node.js.

In addition to the many tools that simplify the usage of working with Sass, Less and Stylus, there are utilities to convert from one language to another, see CSS PREprocessors.

All three choices are very similar in many ways yet have their strengths and weaknesses, but ultimately, the choice boils down to personal preference and comfort level. I prefer Stylus as it combines the best features of both Sass and Less and utilizes a simplified syntax.

End note: What’s ironic about this evolution of web design concepts, is that CSS preprocessing enables a designer to devote more time to cosmetics, however, the latest trend is for flat, Windows 8 like, design. So the enhanced design capabilities seem to be inversely related to the demand for them. Go figure.

Sources
Advertisements

1 Comment

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