Anirudh Prabhu [Anirudh Prabhu] - Beginning CSS Preprocessors: With SASS, Compass.js and Less.js

CHAPTER 1

Introduction to Preprocessors

HTML5 and CSS3 are changing how web pages are designed. CSS3 provided web developers with advanced features such as gradients, transitions, and animations, etc. However, these new features increased the complexity of CSS code, thus making it more difficult to maintain.

Besides the complexity introduced by CSS3, writing CSS may turn painful with time, because programmers have to perform many of the same activities over and over again (such as having to look up color values in CSS and margin/padding declarations). These small repetitive tasks add up to quite a bit of inefficiency. Preprocessors are the solution to these, and a handful of other, inefficiencies.

CSS preprocessors extend CSS with modern programming-language concepts. In order to use Sass (Syntactically Awesome Stylesheets), you must know how to code in CSS. CSS preprocessors allow you to use variables, functions, operations, and even rule or selector nesting while coding your CSS. With CSS preprocessors, you can apply the Dont Repeat Yourself (DRY) principle to your CSS code. Following the DRY principle helps you avoid code repetition.

What Are Preprocessors?

A preprocessor takes one form of data and converts it to another. In the context of CSS, Less and Sass are popular preprocessor languages, and they take input in the Less or SCSS format and produce processed CSS.

These CSS preprocessors empower CSS by removing the inefficiencies and making web sites easier and more logical to build. The increase in popularity of preprocessors led to the rise of different frameworks based on them; one of the more popular is Compass.

shows how a preprocessor takes a preprocessor-formatted file and translates it to CSS that the browser understands.

. Preprocessor-friendly file being translated to normal CSS

With a preprocessor, you can structure CSS similar to other languages like PHP or JavaScript. Thus, a preprocessor brings peace of mind to the developer. It lets you write code thats future-proof and easily maintainable, thus saving time and energy.

Preprocessors are extensions of CSS, which means that valid CSS code is valid preprocessor code. Developers familiar with CSS wont have a learning curve while learning any preprocessor.

Why Use Preprocessors?

CSS uses a declarative form of programming. This means that the styles that you write in the code are used directly by the browser, without any compiling.

Many developers prefer to write stylesheets by hand. They believe that preprocessors would add extra complexity to their workflow or would have a steep learning curve. But in reality, CSS preprocessors make your daily work a lot easier. This book shows you how preprocessors can be more efficient for writing CSS without disturbing your workflow.

Lets consider an example where you need to replace multiple instances of a color thats used sitewide by finding it one instance at a time. Wouldnt it be great if CSS could simplify this process? Something like would be an example.

. Reusable Variable for Color

$site-color:#eee;
a {
color: $site-color;
}
#topBar {
background-color: $site-color;
color:#fff;
}

With a preprocessor, changing a value in one place changes the entire stylesheet. This is shown in .

Lets consider another example of code repetition. Many times there are blocks of code used at various locations in your stylesheet, as shown in .

. Repeated Code Block

p{
padding-bottom:45px;
text-align:center;
}
footer {
padding-bottom:45px;
text-align:center;
}

With preprocessors, you can put these redundant rules into a mixin, which is defined once and can be included as needed. This is shown in .

. Creating and Using a Reusable Code Block in the Preprocessor

@mixin containerSettings {
padding-bottom: 45px;
text-align:center;
}
p {
@include containerSettings;
}
footer {
@include containerSettings;
}

Listing 1-5. Output of

p {
padding-bottom: 45px;
text-align: center;
}
footer {
padding-bottom: 45px;
text-align: center;
}

CSS, which is the foundation of all preprocessors, has a steep learning curve when it comes to understanding how different properties work, understanding cascading, browser support for various properties, the selectors, the quirks, and so forth. In addition to all the previous points, consider that maintaining stylesheets in todays complex interfaces is a big challenge too.

Most of the time, stylesheets are immensely repetitive, with properties or groupings of properties, etc. The typical CSS file is a linear document. This makes a programmer from an object-oriented domain go crazy.

As per the DRY principle: Every piece of knowledge must have a single, unambiguous, authoritative representation in a system.

The simplest explanation of this is that redundancy in code can result in failure and can create confusion for developers. CSS does not follow the DRY principle. Most of the times, CSS files will contain repeated rules, declarations, and values. Developers are constantly writing the same snippets of code throughout their stylesheets.

CSS lacks features like variables, symbolic constants, conditionals, expressions over variables, and so on, that are available in all other programming languages.

The CSS preprocessor sits between your preprocessor-friendly file and the compiled CSS files, which will be served to the browser. CSS preprocessors allow you to write code as per the DRY principle, making it faster, efficient, and maintainable. The code is then compiled into regular CSS files via the command line or an application.

Consider the example in . Modern browsers support RGBA (Red Green Blue Alpha) and HSLA (Hue Saturation Lightness Alpha) color values. However, you need to provide a fallback for older browsers. A common practice is to declare a hex value first and then the RGBA or HSLA value.

. Supporting a New Color Format in All Browsers Using CSS

.container {
background-color: #000;
background-color: rgba(0,0,0, 0.9);
}

With preprocessors, this job can be done easily. If the same task were to be completed using the Sass precompiler, it would be done as shown in .

The preprocessor does all the calculations related to RGBA values for you.

With arrival of CSS3 support in modern browsers, people are not using images as much and are going with pure CSS. However, each browser has its own implementation of these features, and therefore these require vendor prefixes and different syntaxes. You can see a simple example of this in .

. Implementation of CSS Features for Different Browsers

.container {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

Preprocessors make this job easier by allowing you to declare this code in a reusable component called a mixin (covered in coming chapters) and then use it directly in your code.

This example assumes that this reusable mixin is named rounded-corners . The code for this in the Sass preprocessor would look like .

Using a Sass Preprocessor

.container {
@include rounded-corners(4px);
}

So far you have seen how preprocessors help in coding CSS. Now lets 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.

Next page