Book Image

Instant SASS CSS How-to

By : Alex Libby
1 (1)
Book Image

Instant SASS CSS How-to

1 (1)
By: Alex Libby

Overview of this book

CSS styling has been a key part of developing for the Internet since the early 1990s, but unlike JavaScript, has suffered from the inability to produce dynamic styles, using functions, operators, and variables. SASS uses the power of Ruby to bring support for all three and more to your CSS, allowing you to engage in a more efficient, modular style of working, and making it easier to maintain your CSS styling in your projects.Instant SASS CSS How-to is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the power of SASS, and give you a good grounding in writing and compiling CSS style sheets using the SASS pre-processor language.This book looks at how you can incorporate SASS into your web pages, and either produce style sheets dynamically, or pre-compile them before including the final article into your site's pages.You will also learn how you can use the power of mixins, functions, and variables to help produce style sheets, and reduce the amount of code you need to write in your style sheets. We will also take a look at how you can incorporate a more modular style to your development workflow, which will help with making style sheets more manageable and easier to update in the future. We will also take a look at how you can build up libraries of reusable code that you can incorporate into your future projects.You will learn everything you need to know to start using SASS to help produce more efficient style sheets in your site's pages, and adopt a more modular development workflow, which will make it easier to maintain your sites in the future.
Table of Contents (7 chapters)

Downloading and installing Compass (Should know)

So far, we've had a look at how to write our own mixins, as well as importing and using pre-written mixin libraries. We should not forget the most popular mixin library that is available for use with SASS though, which is Compass. We're going to turn our focus to installing support for it, as part of the next recipe.

Getting ready

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

How to do it...

  1. Let's get started by firing up a command prompt, and entering the following command:

    gem install compass

    You should see the following screenshot:

  2. That's all – it's very easy! Sorry to disappoint you if you were expecting more…


    If you find the installation bombs with an error regarding RDOC documents already being installed for Compass, then all you need to do is to rename the rdoc folder in C:\Ruby193\lib\ruby\gems\1.9.1\doc\compass-0.12.2 to something different and then rerun the installation. The fault occurs because a folder for RDOC documents for Compass will have been created when Ruby was installed, but documents haven't been added. The install for Compass doesn't overwrite this folder by default.

How it works...

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.

There's more...

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 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"


The previous commands are for a UNIX environment; replace $ with C:\ or your chosen drive letter for use in Windows.

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.