Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Why do we need CSS preprocessors?


CSS is a declarative, not a programming language. This simply means that the style properties and values that we declare within the rules of CSS are exactly what the browser uses to paint the screen. A programming language on the other hand provides some means of defining logic. Crudely put, a logical statement might be in the form of: if the h1 elements are in a nav element, make them blue; if they are in the header elements, make them red. A programming language also facilitates variables. These can be thought of as placeholders for something reusable (for example, one might have a variable for a specific color value). Then there are functions, a means to manipulate values with operations (for example, make this color 20 percent lighter). Sass and Compass provide these capabilities and more.

If some of the terminology in that last paragraph sounded alien, fear not. We will be dealing with all those concepts in due course. For now, let's just consider some common misgivings about CSS preprocessors.

If it ends up producing CSS, why not just write CSS?

My initial reaction when looking at the CSS preprocessor Sass was, 'If it ends up producing CSS, why don't I just write CSS?' Turns out, this is a reaction many people have. After all, we use CSS everyday. We can (hopefully) use it to fix all the usual layout problems that get thrown at us, build responsive websites that are displayed beautifully on all devices, and generally make ourselves feel like, for the most part, we know what we are doing.

Let's be clear from the outset. Sass won't necessarily make us produce better CSS. For example, if you don't understand how to use CSS now, Sass and Compass won't fill that gap in your knowledge. However, Sass enables us to write CSS faster and more easily while also keeping the style sheets far more maintainable.

Tip

Sass, LESS, or Stylus?

The chances are, if you are reading this, you have already done a little research and decided to look into Sass as opposed to LESS or Stylus. LESS and Stylus are also CSS preprocessors that do similar things to Sass. It is my humble opinion that Sass is a better and more powerful language, although I'll concede that the documentation for LESS in particular can make it seem easier to get to grips with. However, if you'd like to read a good summary of the various pros and cons of Sass and LESS, take a look at this great post on the CSS Tricks website, written by CSS maestro Chris Coyier: http://css-tricks.com/sass-vs-less/.