Beginning css preprocessors

Figure 1-2.  Known preprocessing frameworks

---

Chapter 1 

■

 IntroduCtIon to preproCessors

7

Mixins

Compass and Bourbon both provide a huge collection of mixins for various CSS3 features, which you will 

look at in detail in coming chapters. That means the developers don’t have to worry about vendor prefixes or 

CSS hacks. Listing 

1-10

 demonstrates the use of mixins with regard to box sizing.

Listing 1-10.  Example Showing the Use of a Mixin Provided by Compass

el{

        @include box-sizing(border-box);

}

Typography

Compass and Bourbon both contain typography-related mixins, variables, and functions. Compass comes 

with a lot of variables and a couple of mixins.

One of the features of Compass in this area is that it can also work with rem units with px fallbacks.

Listing 1-11.  Example Showing Use Typographical Functionalities of Compass

el{

        @include adjust-font-size-to(42px);

}

Helpers

One thing that Compass provides are helpers. Helpers save time, as they are predefined CSS snippets that 

you need to use directly in your stylesheets.

For example, Compass provides a helper for clearing the floats, a reset (with various options), some 

techniques for image replacement, and more.

Bourbon calls these helpers addons, and they are fewer in number than Compass.

Sprites

Because Compass is partly built in Ruby, Compass can interact with the file system. One of the things it can 

do is build sprites based on a folder of images.

Listing 1-12.  Example Showing Compass’ Simple Way of Building Sprites

@import "icon/*.png";

@include all-icon-sprites;

It also provides functions like image-width(), image-height(), and inline-image(), which encode an 

image file in Base64.

www.allitebooks.com

---

Chapter 1 

■

 IntroduCtIon to preproCessors

8

Features of Preprocessors

This section goes through some common features of preprocessors that make them great tools for 

developers versus using CSS directly. You will be looking at some examples in context. The examples use two 

famous preprocessors—Sass and Less—which you will be studying in detail in coming chapters.

Variables

Variables help you store information that needs to be reused in your stylesheet. Properties like colors, font 

styles, or any CSS style can be stored and reused. For example, in Sass $ symbol is used to declare a variable.