Instant SASS CSS How-to: Learn to write more efficient CSS with the help of the SASS CSS library using practical, hands-on recipes

For this recipe you will need a few things – you will need your choice of normal text editor; I normally use TextPad, which is available on a commercial license at http://www.textpad.com, although please feel free to use whichever editor you prefer. You will also need a copy of RubyInstaller for Windows, which you can download from http://www.rubyinstaller.org/downloads; at the time of writing, the latest version is 1.9.3. If you are a Mac OS X user, you will already have Ruby installed as part of the operating system; Linux users can download and install it through their distribution's package manager.

In this recipe, we've installed Ruby and SASS, and looked at how to run the SASS --watch command to set the SASS compiler to automatically compile CSS files when you create SCSS files. In this instance, we created a basic SCSS file, which SASS has parsed; it works out where variable "placeholders" have been used, and replaces them with the appropriate value that has been specified at the start of the file. Any variables included in the SASS file that are not subsequently used, are automatically dropped by SASS.

While the creation of CSS files using this method is simple, it is a manual process that has to be run outside of your text editor. In the next recipe, we'll take a look at how you can add support so you can compile code from within your text editor, using Sublime Text 2 as your example editor.

For this recipe, you will need to obtain a copy of the shareware application Sublime Text 2, which is available at http://www.sublimetext.com/2 – the latest version at the time of writing is 2.0.1. You will need to purchase a license for continued use – at the time of writing, the cost is USD 59. You will also need to get a copy of the SASS plugin for Sublime Text 2 – you can download either the ZIP or tar package from https://github.com/n00ge/sublime-text-haml-sass/downloads (I will assume you have downloaded the ZIP file, for the purposes of the recipe).

The SASS support package that you downloaded from Github contains a number of layout instructions to tell Sublime Text 2 how to format SASS code within the browser. It also contains commands that will allow you to build the CSS file from within SASS. If you click on the Tools menu, then Build, you can initiate the SASS compiler to automatically compile your code, as we did in the previous recipe. It will start the compiler's watch facility, which will then kick in when you make the next change within Sublime Text 2.

There are lots of editors available Sublime Text 2 may not suit your needs, so it is worth looking online and trying a few before finding one that works for you. As an example, for Mac users, you may prefer something like CodeKit, which is available from http://incident57.com/codekit/index.php. This already includes support for SASS.

There may be instances where you may prefer to use the command line to create your SASS files though; you may prefer to use a GUI just to compile your code. In the next recipe, we'll take a look at how you can do this, using Scout.

For this recipe, you will need to obtain a copy of Scout. It is available from http://mhs.github.com/scout-app/. The latest version at the time of writing is 0.7.1; this is a cross-platform application that will require you to download Adobe AIR. I will assume for the purposes of this exercise that you don't have it installed; you can download it from http://get.adobe.com/air/.

Scout performs much the same process that we looked at earlier in this book; it watches out for any SASS files that it has been made aware of, and will compile them into valid CSS files when a change has been made. The key difference is that while you may have to manually set up a number of different sessions in a command prompt, to watch multiple files, or a single session to watch multiple files, Scout allows you to do this from within one screen. It has the options to add details for watching multiple files or folders, which you can then turn off or on as desired.

If you are a Mac or Windows user, and prefer not to use Adobe AIR, then there is an alternative that you can use – LiveReload. It is available at http://livereload.com/. This is primarily a Mac application, although a version is available for Windows XP with Service Pack 3 or above. Note though that the latter is an alpha version, so please try it at your own risk; it may not suit everyone!

Now that we have the ability to compile our files, there is one last part we need to look at before we can start writing code – it will be useful to know from within a browser session, which SASS line is being referenced for a particular style. No problem, we can do that using FireSASS, as you will see in our next recipe.

For this exercise, you will need a copy of Firefox, with Firebug installed. You can get the latter from http://www.getfirebug.com.

FireSASS works by replacing the line number of the CSS style in use, with that of the line number from the original SCSS file:

It relies on the --watch function being activated with --debug-info enabled. Using the previous example, we can see from the screenshot that the border color calculation of border: 1px solid $color-button - #222 returned a color of #B02222, which is a slightly darker shade of red than the main button itself. The beauty of this is that no matter whatever color you decide to use, the calculation will automatically return the right shade of color for the border.

Not convinced? Change the $color-button variable to something completely different. I've chosen #3bbfce. Now recompile the SASS file in Sublime Text 2 and the result is a nice shade of blue:

Okay, so we've only changed the color for one button in this example – it doesn't matter if you make a change for one button or many; using this code means you only need to change one variable to update any button that uses the same variable in your code.

If you look into the folder where you are storing your SASS files, you may notice the presence of a .sass-cache folder, inside which there will be one or more .scssc files as shown in the following screenshot:

These are cache files, which live in the same folder as your source files by default. They are created by SASS when initially compiling SCSS files. This dramatically speeds up the compilation process, particularly when you have a large number of files to compile. It works even better if styles for a project have been separated into one of these files, which SASS can then compile into one large master file.

Let's move on now, and focus on the library itself. Over the next few exercises, we will look at various elements of the library, beginning with using nested rules.

Right – I'm going to throw you in the deep end…no, only joking!

You won't need a great deal for this exercise, as most of it will be completed in your trusty editor, which I hope will be the Sublime Text 2 application we installed earlier in this book. If you don't use Sublime Text 2, then you will need to have an instance of SASS' watch command running in the background, to compile code.

You will also need two images, which we will call tab_a.png and tab_b.png. Copies of these images are available in the code download that accompanies this book. If you prefer to change the colors (as I am no artist!), then please feel free to do so. As long as you keep the same names then this will be fine. You can use a site such as Tabs Generator (http://www.tabsgenerator.com) to generate the initial tabs; you are likely to need something like PhotoShop or GIMP to edit them to size.

The key to this exercise is in the #menu block of CSS code – this contains the nested styles that are used by the menu. SASS is able to understand that inner rules will only be applied within the outer rule's selector. This allows you to avoid repetition that you would otherwise get if you were writing styles that are inherited from a parent style. It also means that the code becomes more readable, as the code is in a format that is more logical to the human mind.

Some of the more observant of you may have noticed the ampersand (&) being used in this block of code, and one other:

  &:hover {
    background-position: right -51px; margin-top: -2px; height: 40px;
  }

The ampersand has a special meaning in SASS; it references the parent selector in the same way as the other styles do, but the difference here is that the & character is used when you have special styles such as :hover or :visited. When compiled, the code will look something like the following code snippet:

  #menu li a:hover {
    background-position: right -51px;
    margin-top: -2px;
  height: 40px; }

It's time to turn our attention to another part of the library, which is SASSScript. Before we do this, we need to make a small diversion, to look at a small but important part of the library – using comments in SASS – as part of the next recipe.

All you will need for this exercise is your trusty editor. For the purposes of this recipe, I will assume you are using Sublime Text 2 that we installed earlier in the book. If you don't use Sublime Text 2, then you will also need to have an instance of SASS' watch command running in the background, to compile the code.

Adding comments to SASS files is very easy, it is no different to adding comments to code, when using PHP or JavaScript for example. However, there are some features you need to be aware of:

Now that we've seen how comments work, it's time to turn our attention to something more in-depth. Let's take a look at how you can use functions and operators within SASS, starting with a look at SASS Script.

All you will need for this exercise is a terminal or command prompt, depending on which environment you use.

Right – you're probably thinking "How I can use this in my work…?"

It's a good question – let me explain. Interactive SASS is not meant to be an all-singing, all-dancing part of the library. Think of it as a way of validating your calculations, particularly when working with colors and/or numbers (such as sizes). Interactive SASS allows you to enter in any number of simple calculations, and it will render the results on screen. You won't be able to enter in large mixins, but if you need to confirm what a simple calculation would render, then this is perfect.

In particular, notice the error shown in step 3? While the calculation itself is perfectly valid, Interactive SASSScript doesn't like the margin-left: text at the start, hence the error. If you're wondering why 6.5px is wrong, it is because certain operators are prioritized before others. In this example, the division is done before addition, so 8 px divided by 2 px gives 4 px, plus 5 px gives 9 px as the answer.

Its real power comes in step 5 – the calculation is a bit of a mouthful, so having the ability of Interactive SASS available is a great help to confirm the expected result. It also means that if you wanted to reduce the complexity down to a single color value, then you can. It is entirely up to you.

Let's move on and turn our attention to a different part of the library. We'll be taking a look at using CSS-3 directives within SASS; we will come back to using functions later in the book.

For this recipe, we're going to need some suitable icons for each dialog box. There are dozens available online for you to choose from. One such place is the Open Icon Library Project (http://openiconlibrary.sourceforge.net). You will need three icons in total; one for the alert dialog, one for information, and one for the error dialog.

You will of course need your text editor as well. For the purpose of this example we will be using Sublime Text 2.

In this exercise, we've looked at two components of the CSS-3 directives functionality available within SASS – the @import and @extend directives. The former allows us to bring in (or import) content from multiple sources into one file. When SASS compiles the files, it will produce one CSS file that contains all of the imported styles within it. This has the benefit of removing the need for multiple requests to the server, while still maintaining the ability to separate our work into smaller, more manageable chunks.

The second directive is that of @extend – think of it as a form of inheritance. It tells SASS to include the base mixin by default. However, it doesn't just include it as additional styles within the same block, thereby leading to unnecessary code bloat, but to create a base style that applies to all styles that subsequently inherit it:

.base, .alert, .info, .error { width: 200px; height: 50px;
  border-radius: 5px; -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; padding: 20px 20px 5px 75px;
  text-align: left; }

.alert { background: #fff6bf url(images/exclamation.png) 5%  50% no-repeat; border: 2px solid #ffd324; }

There is a wealth of functionality you can use within SASS, and which we've not been able to cover here in this book. It is worth looking at the documentation available online to familiarize yourself with what is possible. A good example is the @media directive. This behaves much in the same way as CSS does, but SASS allows you to embed it into nested styles, in a similar way to how we've used @extend in our example.

Let's move on now and look at another part of the SASS library – control directives. I'm sure you've all used functions such as foreach, while, and until when programming code? Well, you can do something similar in SASS. I'll show you how, using the power of social media and @each as our example.

You'll need your trusty text editor. Ideally this should be Sublime Text 2, as we will be compiling SCSS code. We'll also need some social media icons, for which there are plenty of sources available on the Internet. As an example, you could try the ones available at GoSquared (https://www.gosquared.com/resources/gosocial). As well as getting the icons, you will need to rename each icon you use to the format icon-XXXXXX.png, where XXXXXX is the name of the social network, such as LinkedIn. I will assume we are using these icons during the exercise, and that they have been suitably renamed.

Although this exercise was deliberately designed to be simple, it serves up a perfect example of how you can cut down the amount of code you need to write, while still maintaining the same result.

Here, we've used the power of @each to loop through each name specified, and to create the appropriate styles using the rules specified:

padding: 5px 40px 20px;
color: #8B4513;
display: block;
background: url('images/icon-#{$socnet}.png') no-repeat left top;
width: 100px;
font-family: 'Macondo', cursive;
font-weight: bold;
font-size: 24px;

The beauty of this is that it cuts down the amount of repetitive code you have to write in your stylesheet. Provided the same format is used throughout, then each icon will receive the same styles (apart from the name of the image, naturally). To see how effective this is, have a look at the compiled code in Sublime Text 2. My copy listed 64 lines of styling code, compared to the 16 we've had to write. That's a real difference, isn't it?

Let's move on, and turn our attention to another part of the library, and one I am sure you will be using regularly – mixins. I'll show you how over time, you can build up a library of reusable code that can be dropped in at a moment's notice.

All we'll need in this recipe is our trusty text editor. If you are using Sublime Text 2 (which I hope you are), you can use the SASS compiler that we hooked in from earlier in the book.

Although at first glance it might seem a lot of code to style a button, but a closer look will reveal that most of the code comes from the three mixins that we've included. Mixins are blocks of code that can be imported into a new or existing CSS stylesheet, in much the same way as you might reuse programming code. SASS is clever enough to only compile in those styles that are being used by the HTML code to which they relate.

The key to understanding the previous code is in the @include keyword. When compiling, SASS will bring in the CSS styles from the mixin whenever it sees a mixin placeholder, as shown by the lines highlighted in the following code snippet:

.classname {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100));
  background: -moz-linear-gradient(center top, #fe1a00 5%, #ce0100 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: inset 0px 1px 0px 0px #f29c93;
  -moz-box-shadow: inset 0px 1px 0px 0px #f29c93;
  box-shadow: inset 0px 1px 0px 0px #f29c93;
  background-color: #fe1a00;
  border: 1px solid #d83526;
  display: inline-block;
  color: #ffffff;
  font-family: arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 1px 1px 0px #b23e35; }


.classname:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00));
  background: -moz-linear-gradient(center top, #ce0100 5%, #fe1a00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
  background-color: #ce0100; }

.classname:active {
  position: relative;
  top: 1px; }

"This is all good, but how is it going to be useful to me…?"… I hear you ask. The answer to that question is simple – in the three mixins you have the beginnings of a code library that can be reused within your projects as many times as you need, and that you can build up over time. SASS will only ever import styles that are referenced within the HTML, so there is no danger of code bloat. You can also separate your SCSS code into several documents; SCSS will import each and create one master document as part of compiling the code, thereby reducing the number of requests made to the server.

Taking the code we've used here further, you could include functions within the mixin (as we've covered in this book), to work out the right shades of color to use – all with the use of parameters as part of calling in the mixins. This should mean you only need to pass in one color.

Ah-ha! Perfect timing – it just so happens that the next exercise is about functions. Although we're going to play with some text, the same principles could easily apply to styling objects such as buttons. Let's take a look and see how functions work in SASS.

All we need for this recipe is our text editor. For the purposes of this recipe, I will assume that you are using Sublime Text 2. If you don't use Sublime Text 2, then you will need to have an instance of SASS' watch command running in the background, to compile code.

In this recipe, we've used three pieces of functionality from the library – color functions, string interpolation, and operators.

String interpolation is a simple but very powerful function in SASS. It allows you to use placeholders within your code, so that when a string is passed through to a function, SASS will replace that placeholder with the desired value as part of compiling the code.

Operators work in a similar way to other languages – here, we've used them to work out the font-size value that should be used for each style. For example, based on an H1 style set at 4em, an H3 font size will work out as 0.6 x 4em, or 2.4em.

The lighten and transparentize functions are part of SASS' library of functions for working with color. The former will lighten a given color by the specified amount, and the latter will make a color more transparent by the amount given. A key thing to note is that SASS will normally leave color formatting alone; the exception to this is when using HSL colors, which are automatically output as hex values and HSLa values are shown as RGBa equivalents. You may therefore find RGBa values appearing in your code, in a similar fashion to what we've used for the H1 style rule in this exercise:

color: rgba(102, 51, 17, 0.7);
font-size: 4em; }
h1:before { content: "Hi Firefox users! This is a...."; }

It won't make any difference to the outcome, although some people find it easier to use, as it is not always easy to tell what a hex color value is!

This is a really powerful part of SASS, which, if used correctly can significantly reduce the amount of values that you have to work out, such as colors for a theme. It does require you to take care over how you do – to misquote a well-known phrase, "measure twice, and drill a hole once", or in this case, "calculate twice, and then write once…" – you get the idea…

To show you how important it is to take care with this part of the library, a perfect example arose when writing this demo; I used this rule to create my H1 style:

h1 { @include firefox-message("&", $firefox-greeting); 
  color: transparentize($mainColour, 0.3); 
  font-size: $h1Size;
}

This pulled in the firefox-message mixin, we will learn more about these later:

@mixin firefox-message($selector, $message) {
  #{$selector}:before { content: $message; }
}

This compiled to the following code, notice the deliberate error?

h1 { color: rgba(102, 51, 17, 0.7); font-size: 4em; }
  h1 h1:before {
    content: "Hi Firefox users! This is a...."; }

In case you didn't spot it, you can't use a double H1 attribute when referencing the content rule. To fix this, you need to pass an ampersand instead of the H1 attribute:

h1 { 
  @include firefox-message("&", $firefox-greeting); 
  color: transparentize($mainColour, 0.3); 
  font-size: $h1Size;
}

SASS understands that the whole rule will automatically apply to each style. The & sign tells SASS to use each selector that is passed and to assign the :before pseudo-selector when creating the rule for displaying the text.

For this recipe you will need your text editor. Here, I'm using Sublime Text 2, although you can use an alternative if you prefer. You will also need Scout up and running, which we installed earlier in this book. While you can use the command line route to control the output style, Scout makes it much easier to achieve!

Notice the difference in styles between the two files? SASS makes it very easy to output your code in any one of the four different styles. You can choose from Expanded, Compressed, Compact, or Nested. All you need to do is to change the Output Style option in Scout to your preferred choice, then stop and restart Scout by clicking on the play/stop button as shown in step 4 of this recipe. Scout takes care of compiling the code in the chosen format for you.

I mentioned earlier that we would use Scout for this recipe – with very good reason. It is possible to compile the code with the appropriate output style set, but it is more of a manual process.

If you prefer to compile via the command line, then you can use the –style switch to achieve the same result. This is how you would compile the code using the compressed format:

sass --watch --style compressed style.scss:style.css

The trouble is, you will have to enter this at the start of each session, unless you add it to a batch file (or Mac equivalent), and run it. This can be a pain, particularly as the earlier command will only watch for the named file!

You can also achieve the same result using Compass (we will see more of Compass later in the book). As part of using Compass, you can add in an option to the config.rb file, similar to the following code snippet:

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed #:expanded or :nested or :compact or :compressed

Using this option means you would use Compass' version of watch, instead of SASS'. The highlighted change would apply to all files in the same project folder, whereas the earlier SASS command only applies to the file being watched. Overall, Scout is more flexible, even if it is not the speediest!

Okay, so far we've focused our attention on functionality that is available with the core SASS library. Let's go a little further afield now, and look at how you can use pre-built external libraries such as Bourbon within your code, using a classic jQuery-based sliding panel as our example.

For this recipe, we're going to need a few things, along with our trusty text editor:

Phew - that was some recipe! Let's take a look at what we've achieved. Although it seems a lot of code, we've used jQuery to animate a div in and out, depending on whether the trigger [ ] icon has been clicked. The jQuery code in itself is very small; most of the work was in styling the page!

In the SCSS code, we've used a number of SASS features to help us style the code. Notice the @import call at the top of the code? This tells SASS to use the Bourbon library we installed earlier, and allows us to use the border-radius mixin. We then have two mixins – one for setting font styles, and another for styling some of the links. We've also used nesting on some of the styles, including using the & keyword to correctly include pseudo styles, such as :hover. We also have a border-radius mixin from the Bourbon library; remember the comment made earlier about the warning message you may have when compiling the code? While the code will still work, it is worth noting that vendor prefix support has changed since the Bourbon library was first written. Specific vendor entries for border-radius will be removed from the library as most browsers support border-radius by default.

The other important part of this recipe is in the compiling of the SCSS styles, which used the following command:

sass --watch c:/bourbon/projects:./bourbon/projects/css -r ./bourbon/lib/bourbon.rb

It may look a little confusing, but it breaks down into the following: it is using the Sass sass command to watch (–watch) a folder called c:\bourbon\projects, which will put compiled files into a subfolder called css, and to do that it requires (–r) the bourbon ruby file bourbon.rb. It's important to learn this, as it is very likely that you will need to use a similar command when including other pre-built mixin libraries in the future.

Now that we've begun to look at mixins, it's a good point to pause for a moment, and consider an important concept that would be wise for you to master when using SASS – developing your own style of writing mixins.

For this recipe, you won't actually need anything, we're just going to look at some theory. Although you may want to play with code from this book, using the principles we'll go through as a basis for developing your own style.

The beauty of working with SASS and CSS is that there are no hard and fast rules about presentation, it is all about developing your own style. The previous guidelines are not meant to be set in stone, they are designed to help structure your code and steer you towards a more modular approach, so that you can begin to reuse your code in future projects.

For this recipe, all you will need is a command prompt.

This is a very easy recipe, all we have done is run a command to install Compass. Ruby applets such as Compass come in the form of gems, which can be installed directly into Ruby, using Ruby's gem install procedure.

Although the recipe is very easy to complete, the project provides an option to list the steps you need to take to install Compass and set up your first project, which you can see at http://compass-style.org/install/. The steps are very similar to the ones we've been through in this recipe. It does give you the option to choose how you want to set up your Compass project, and will pipe out the commands you need to run to create that project environment.

If we use the following folder structure of sass for scripts, javascripts for JavaScripts, images for images, and css for stylesheets, it would give the following command; as shown in the screenshot and command example:

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

There are other options available using this tool – if you feel comfortable using the command line, then this is worth trying it out. If not, then you can always use a GUI-based application, such as Scout, which we covered earlier in this book.

Now that we have Compass installed, let's move on and turn our attention to using its functionality. In this and the next recipe, we're going to look at two elements that you are likely to use often, which is creating image sprites and using vendor prefixes.

For this recipe, you will need some suitable images that are a maximum of 32 px square. I have used a selection of 12 credit card images which are available at http://www.smashingmagazine.com/2010/10/21/free-png-credit-card-debit-card-and-payment-icons-set-18-icons/. You will of course also need your text editor and Scout up and running.

Although this might be a little tricky at first to get to grips with, it is worth persevering – the three lines of code required to implement this functionality belies the power of creating sprites using Compass. In this example, we've collected together a number of images of the same size, and used Compass to generate a single image and the appropriate CSS to allow us to reference each image.

The resulting CSS will include a base style that references the newly created image, followed by individual styles that tell the browser which part of that image to use, as shown in the following extract from the imagesprites.css file:

/* line 130, cards/*.png */
.cards-icons, .cards-cirrus-curved-32px, .cards-delta-curved-32px, .cards-direct-debit-curved-32px, .cards-discover-curved-32px, .cards-maestro-curved-32px, .cards-mastercard-curved-32px, .cards-paypal-curved-32px, .cards-solo-curved-32px, .cards-switch-curved-32px, .cards-visa-curved-32px, .cards-visa-electron-curved-32px, .cards-western-union-curved-32px {
  background: url('/cards-sad556f86f6.png') no-repeat;
}

/* line 60, ../../Program Files/Scout/vendor/gems/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.cards-cirrus-curved-32px {
  background-position: 0 0;
}

Using sprites in your web pages reduces the number of server requests and decreases response times – each subsequent reference to the image calls it from the server cache. You could even get fancy and store it in the local storage area of a compatible browser. This will eliminate any server requests, if done with care! There is a small proviso though with using Compass to create sprites – size and number play an important part in image selection. If Compass deems you've used too many, then it will automatically switch from the default 8-bit format to a higher format, with the associated increase in size and load times. At this stage, it may be preferable to use an external service instead, such as SpritePad (http://www.wearekiss.com/spritepad).

Let's move on, and take another look at this veritable swiss-army knife of a library –vendor prefix support. Compass is often recommended as a good place to start when learning SASS. We're going to look at vendor prefix support, as part of building a simple form in the next recipe.

For this recipe, all we need is our text editor and Scout (there is a reason for using this, which I will explain later). I will assume you are using Sublime Text 2, which we installed earlier in this book. You will need to have the hex values for three colors to hand – you may already have some in mind, but if not, you can use an online site such as http://www.colorhexa.com/ to choose the hex codes for three colors.

The key to how this recipe works lies in how we've split off styles for each button into two parts – the base style, and the décor that defines each button's individual color. Think of it as baking a cake – the base style is the sponge layer, which will be the same throughout. We're making each resulting end style individual by adding different icing (or in this case, colors) on top.

To achieve this, we've used two mixins from the Compass library, border-radius and box-shadow. SASS then replaces each call for each mixin with the appropriate code from the Compass mixin library, during compilation:

input.redbutton {
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -ms-border-radius: 0.5em;
  -o-border-radius: 0.5em;
  border-radius: 0.5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: baseline;
  margin: 0 2px;
  outline: none;

When designing this tutorial, I was tempted to use a third style from the Compass library, linear-gradient. However, I wasn't happy with how it worked, as it didn't appear to like using the darken() functions as part of the library call, and I didn't want to have to add a number of additional variables to get around this. I added my own version instead, it does serve to highlight that while there are lots of mixins available online, they won't necessarily fit your needs. Sometimes it is better to write your own!

Let's move on and turn our attention to using Compass to build another piece of functionality that is very popular – the ubiquitous slider that you will have seen on dozens of sites around the Internet.

For this recipe, you will need a copy of the downloaded code for this book, which is available at the Packt website. However, space constraints mean we're not going to be able to reproduce it here in full, so you will need to refer to a copy from the code download. You will also need a copy of the open-source FlexSlider library which you can download from https://github.com/woothemes/FlexSlider/zipball/master. You will also need your choice of text editor, as well as the Scout application running. I'm going to assume you will be using Sublime Text 2 for the purposes of this recipe.

If you look back at the main index.html file, the process for building a slider is in fact very simple. We've included calls to instances of jQuery (via Google's CDN), Modernizr (for fall-back support), a MouseWheel library (for mousewheel support in the slider), and of course FlexSlider itself. It then focuses on an unordered list (lines 19 to 24), around which we've added some extra markup, similar to what you might add in a production website.

We then add in calls to the FlexSlider library towards the end, which is where the magic happens to turn our unordered list into a slider. We've then used Compass to help style the resulting output into something recognizable as a slider. A look through the CSS code should also reveal some of the Compass features that we used earlier in the book. Did you recognize the mixins in flexslider.scss, the @import statements in style.scss, as well as the nested styles in fsbase.scss?

This recipe illustrates perfectly how SASS can play nicely with other libraries. After all, we're producing what is effectively normal CSS. If you find the CSS from some libraries such as Modernizr doesn't work so well, then all you should need to do is hive this CSS off into a separate file, if you do experience problems using it with SASS.

Now, I'm sure there will be one question you're asking: what about using SASS in something like a CMS system? Absolutely, this is where it can really help, particularly where themes (such as WordPress) can run up to a couple thousand lines! In the last two recipes of this book, we will take a look at how you can use SASS in a CMS system such as WordPress, and see how you can use SASS to cut down your development time.

For this recipe, you're going to need a few things, in addition to your choice of text editor:

In this recipe, we've installed a copy of the Bones theme into a working installation of WordPress and begun to navigate around the SASS partial files, and made some minor changes. I know, before you say anything, it's certainly not going to win any prizes for style! But it highlights a useful point; it is perfectly possible to use SASS in a CMS environment. Indeed, it is almost essential in some respects, if only to manage the large number of lines of code effectively.

We've pulled in a number of concepts that we've covered throughout this book, such as mixins, functions, partials, importing, and more. It may seem somewhat complicated, but if you spend any time developing in WordPress, it will be worth spending time just going through the code, so that you can learn how the theme works. It is important to bear in mind though that a fair amount of the functionality you might otherwise have expected to see, won't be there – the developers did this intentionally as they wanted the theme to act as a base for your own development. After all, it's easier to add functionality, then to take it away!

We have now reached the final recipe in this book – don't worry, it's a nice easy one! We're going to stay with the theme of working with WordPress, and look at how you can use Compass to provide additional vendor support for CSS3 styles.

For this recipe, you will need your trusty text editor (preferably Sublime Text 2). You will also need Scout up and running, and configured to scan the \bones\library folder in your WordPress theme folder. We'll also need the Bones theme from the previous recipe. For the purposes of this recipe, I will assume that the settings remain unchanged from the previous task.

Although we've only scratched the surface with the changes we've made, it opens up a wealth of possibilities of what you can do in WordPress using Compass, or even any other similar mixin library. The same principle was used in both cases in this recipe – we've inserted a reference to Compass, found the mixin we're going to replace, and then removed the original. We've either left the original reference further down the _mixins.scss file as is, or altered it to fit in with the format used by Compass, then saved and recompiled the file.

One question that you may ask though is – why do it? The answer is simple: you could spend time maintaining vendor prefixes, which will come and go over time, or you could get someone to do it for you! There's no real technical necessity to do this, it is entirely up to you how you manage it, depending on what fits in best with your work environment.