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

Chapter 1. Getting Started with Sass and Compass

Writing style sheets with Sass and Compass makes them more flexible, more maintainable, and faster to produce than ever before. That's why companies including eBay, bet365.com, BBC, Instagram, LinkedIn, Square, and Groupon all use Sass and Compass to produce their CSS.

One thing that kept me away from using Sass for too long is how difficult it seemed to get up and running. The thought of needing to use the command line to get something working made me tremble with fear, so when instructions included phrases like 'install ruby gems' and 'run the watch command', I was lost. In the words of Dr Evil, "Throw me a frickin' bone!"

If you're primarily a designer, you may have had a similar reaction. The aim of this book is to make Sass and Compass as understandable and easy to use as possible. That way all of its incredible features can be put to good use right away. I want to assure you right now that if you can write HTML and CSS you can easily master Sass and Compass.

Sass describes itself as a meta language. It's more commonly described as a CSS 'preprocessor'. Either way, the reality of using Sass is simple. Code is written as one file (a Sass file with an extension like .scss) and when the file is saved, Sass converts it into the same CSS you already know how to write (and if you don't know how to write CSS, put this book down and move to another shelf).

It's actually simple to make a Sass file too. Take any existing CSS file and change the file extension from .css to .scss. That is now a fully functional Sass file that you can add extra Sass based functionality to; just think of Sass as supercharged CSS.

If the command line side of things still bothers you, fear not. There are now a number of user-friendly graphical tools to make working with Sass and Compass simple. We'll cover those in this chapter (as well as using Sass and Compass from the command line for those feeling brave).

As this book is aimed at designers, after extolling the virtues of Sass and Compass, this chapter is primarily focused on understanding what Sass and Compass are, how the two relate, and then getting them both installed. Then we will be ready to start our first project.

In summary, in this chapter we will learn:

  • Why CSS preprocessors are needed

  • Why you should use Sass and Compass

  • What Sass is

  • What Compass is and how it relates to Sass

  • How to install Sass and Compass on OS X and Windows

  • Which graphical tools are available to negate the need to use the command line

  • The different syntaxes of Sass