Beginning css preprocessors

Listing 1-9.  Implementing the code of Listing 

1-8

 Using a Sass Preprocessor

.container {

  @include rounded-corners(4px);

}

So far you have seen how preprocessors help in coding CSS. Now let’s consider how preprocessors 

can help during the post-coding phase. Compressing the CSS reduces its original size, which results in less 

loading time. This can be done using online tools or editor addons.

However, the preprocessor can compile to CSS in various ways, one of which is compressed. The 

preprocessor can be configured in a way that, whenever a preprocessor file is saved, it is automatically 

compiled into CSS and compressed. This makes it production ready.

Misconceptions About CSS Preprocessors

This section discusses some common misconceptions that prevent developers from adopting preprocessors 

in their daily workflow.

You Need To Be a Command-Line Expert

Many developers fear the command line. To use preprocessors, you require very little command-line 

knowledge. In fact, you need to learn only a single command. Additionally, there are applications that 

perform the same task without accessing the command line.

You Need To Change the Way You Write CSS

Developers have a way of writing stylesheets and organizing them. Since the SCSS syntax is the same as CSS, 

developers don’t need to change the way they have been writing CSS.

Why Not Write CSS Directly?

The initial reaction of many developers when looking at CSS preprocessors is, “What’s wrong with writing 

the CSS directly? We use CSS regularly and can fix all the usual layout issues and develop responsive web 

sites that work across all devices.”

Well, preprocessors by themselves cannot produce better CSS. For example, if you lack knowledge as to 

how to use CSS, preprocessors won’t be of any use in solving your issues. Preprocessors help you write CSS 

in a fast and maintainable manner by adhering to the DRY principle.

---

Chapter 1 

■

 IntroduCtIon to preproCessors

6

Which Are the Known Preprocessors?

Let’s look at some known preprocessors available today, shown in Figure 

1-2

.

Sass

Sass (Syntactically Awesome Stylesheets) is the most famous preprocessor and it’s been around for eight 

years. Sass is a preprocessor language originally designed and developed by Hampton Catlin and Natalie 

Weizenbaum.

When SassScript is compiled, it generates CSS rules for various selectors as specified in the Sass file. 

Sass can monitor the .sass or .scss files and generate an output .css file whenever the .sass or .scss file is 

saved.

Sass is open source and coded in Ruby.

Less

Just like Sass, Less is another popular CSS preprocessor. It enhances the default CSS syntax by provision of 

mixins, variables, and nested style rules. It is easy to set up. You can also reference its JavaScript file in your 

HTML document and get started.

Less has attracted a very strong userbase due to its simplicity. Less is open source. Its initial version was 

written in Ruby; however, the later versions were written in JavaScript. A valid CSS code is a valid Less code, 

because Less follows the same semantics.

The main difference between Less and other CSS preprocessors is that Less allows real-time 

compilation via less.js within the browser.

Compass

Compass is an open source CSS authoring framework. Compass is based on Sass, and hence it can use of 

all Sass’ features. It is very popular and is under active development. With Compass, developers can write 

cleaner markup without presentational classes.

Compass is filled with many reusable patterns most commonly used by developers.

In parallel to Compass is Bourbon, which is built with Sass, for Sass by Thoughtbot. Bourbon is a library 

of simple and lightweight mixins for Sass.

Some of key features that Compass provides are discussed next.