Preface

Imagine the following scenario:

You're an accomplished developer, working on a high profile project for a demanding client. You're normally a fairly patient kind of person, but even this client is proving a little bit too much of a challenge…when you get that phone call you dread.

"Alex…you know those buttons you kindly changed for me last week? I'm really sorry, but could we please try a different color, as the boss really doesn't like that shade of red!"

This is where you silently curse – that's more than 60 buttons, littered with browser-specific CSS prefixes; a real pain in the neck, which you could well do without, particularly as it took you a couple of hours to make the changes last time. (Yes, it's a big site, before you ask!). Sounds familiar? Wish there was another way to do this? I thought so – welcome to the world of SASS!

SASS, I hear you ask? What's this all about then? Well, I could give you the technical low-down, but it's probably better demonstrated by the use of an example. Do you remember those 60 buttons I mentioned earlier? What if you could change the color of all of those buttons in one go? Yes, you read right, all of those buttons. This is just a small part of what SASS can achieve, as a superset of CSS3. We can use the power of SASS to set a variable that you could use to change the color value set against all buttons in one go, with a single click.

Intrigued? We will look at this and more throughout this book, so let's make a start…

What this book covers

Throughout this book, we're going to look at a variety of exercises that are designed to help you become accustomed to working with the basics of the LESS CSS preprocessor language. You're probably wondering what we're going to cover, right? No problem – let me reveal all:

Downloading and installing SASS (Must know) is the most important part of this book – here, we take a look at how to download and install SASS. Depending on which platform you prefer to use, it can be really easy, or somewhat more involved.

Adding support to text editors (Must know) will take you through how to add support for SASS to your favorite text editor. In this recipe, we'll use Sublime Text 2 as our editor, but the principles could equally apply to other editors that you may prefer to use.

Pre-compiling SASS (Must know) will show you that you don't always have to rely on the command line to compile SASS; there are alternatives available that can do the heavy work for you. In this recipe, I'll show you how, using Scout. We'll also look at a means to convert CSS back to SCSS, although it is not without its shortcomings

Viewing SASS in a browser (Become an expert) is crucial to help debug any style issues in your code. There will be moments when you've written a style, only to find it's not working as you expected. No problem – I'll show you some ways to view this information, depending on which browser you prefer to use.

Using nested rules (Must know) in SASS is a good way to reduce repetition in your code. In this recipe, we'll start our coding journey by looking at how you can use SASS to nest your CSS rules, to avoid such repetition.

Using comments in SASS (Should know) will probably be one of the most important things you use in SASS when starting out. After all we're only human, and you won't be able to remember what each style is meant to do, once you complete your project! In this recipe we'll see how to add comments in this task, and when to use the different types available.

Getting interactive with Script (Become an expert) may at first appear easy, but it's simplicity belies its true power. In this recipe, you'll learn how you can easily check the results of any mathematical formula you decide to use in writing SASS. Not sure what I mean? Here's why you'll see margin-left: 5px + 8px/2px equals 9px, and not 6.5px, as you might otherwise expect.

Using CSS-3 directives in SASS (Must know) will be a lifesaver, particularly for anyone who uses responsive design techniques. You are very likely to have used keywords such as @media or @import in your code, but have you nested your CSS-3 directives before? In this recipe, I'll show you how you can achieve this and more, using SASS.

Controlling output in SASS (Must know) will show you how you can really save time when working with lots of repeating styles. In this recipe, you'll see how you can use the power of SASS to dynamically create styles for multiple items that use the same styles, such as a group of social media buttons.

Creating and using mixins (Must know) is probably one of the most frequent things you will do when working with SASS. In this recipe, we'll see how you can start to build your own mixins, that you can easily reuse in your projects. We'll also see how you can start to reduce (or even avoid) duplication of styles that you might otherwise have in your projects.

Building functions within SASS (Must know) is no different to using functions in other programming languages. In this recipe, you'll see how you can use the power of SASS to dynamically create styles in CSS, using functions to work out the appropriate style, based on the values you use.

Altering output style (Should know) of your CSS will make you wish you had started using CSS a long time ago. SASS has the ability to use a number of different styles when producing your style sheet output, and maintains a consistent format when using SASS. In this recipe, we'll take a look at the styles available, and how to enable them in your code.

Using a pre-built mixin library (Should know) when working in SASS may seem like a shortcut, but I'm a great believer in "why reinvent the wheel?". We've talked about writing our own mixins throughout this book. It is worth looking online though, to see if people have already created a suitable library available for your needs. In this recipe, we'll take a look at one such example, available from lesselements.com.

Writing mixins – developing a style (Must know) will show you how it can be advantageous to develop your own style when writing mixins in your projects. This recipe will give you some tips you can use, to help in developing your own style when writing mixins, functions, and so on, when developing in SASS.

Downloading and installing Compass (Should know) will take a look at another, well-known library that is often used by developers using SASS, that contains a whole host of useful mixins that you can use. In this recipe, we'll learn how to download and install the library on your own system, ready for use.

Creating sprites using Compass and SASS (Become an expert) will show you how easy it is to produce sprites. You'll soon be on the way to producing them with little fuss, although there are a few gotchas you'll need to be aware of.

Using vendor prefixes and Compass (Become an expert) takes you through how you can avoid the necessary evil that is the bane of every developer's life: vendor prefixes. Fortunately though, Compass makes this really easy. In this recipe, we'll see how, through the use of mixins, vendor prefix issues will become a thing of the past

Building a slider using Compass (Become an expert) takes you through how you can apply some of the skills we've covered, and puts them to good use building a content slider. In this recipe, you'll see how we can use the power of WooTheme's FlexSlider library, and a little help from SASS and Compass, to produce something you can drop in to your future projects, or use as a starting point for further development

Using SASS with WordPress (Become an expert) will take you through how you can begin to apply some of the techniques we've looked at throughout this book, within the confines of a CMS system. In this recipe (and the next), we'll take a look at how you can use it in WordPress. Although the same principles will apply to most (if not all) CMS systems.

Using Compass in WordPress (Become an expert) is where we can really show off the power of SASS and Compass. In this recipe, we'll use the same principles as before, but with Compass. I'll show you how you can begin to adapt a theme to use SASS, and make your development work a lot easier.

What you need for this book

There will be instances where you may need to install software for a particular recipe – we will go through the specifics of each piece of software, ahead of any task. In the meantime, you will need the following:

• An internet connection – for downloading various pieces of software for each recipe.

• A working installation of WordPress – for the form demo towards the end of the book.

• A modern browser – it must be one capable of running CSS3. Ideal examples would be the latest versions of Firefox, Safari, Chrome, or IE. We will look at backward compatibility in older browsers, but the effect will not be the same.

• A text editor – there are hundreds available for free or at a low cost. Alternatively, you can use something like Notepad. My personal preference is Textpad, a shareware application which is available at http://www.textpad.com.

Who this book is for

This book is great for those who may or may not already manage a website of some description, but want to learn how CSS pre-processing can help with streamlining their development workflow, and help reduce the amount of code they need to write. You may or may not already have some familiarity with Ruby.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "We can include other contexts through the use of the include directive."

A block of code is set as follows:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

$red: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($red, 18%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Any command-line input or output is written as follows:

$ gem install compass
$ compass create <myproject> --sass-dir "sass" --css-dir "css" --javascripts-dir "javascripts" --images-dir "images"

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Click on I Agree to accept the license conditions and then click on Finish when prompted."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[e-mail]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[e-mail]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[e-mail]> if you are having a problem with any aspect of the book, and we will do our best to address it.