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)

Creating sprites using Compass and SASS (Become an expert)


One of the best ways to reduce server requests, and consequently response times for a site is to create sprites from your images. You could easily use a website to do this, or you can use the power of Compass to do this for you. We're going to look at how to do this using some credit card images, which could easily appear on an e-commerce site.

Getting ready

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.

How to do it...

  1. Let's make a start by creating a folder called c:\compass, then open up a command prompt, and add the following command. We will use the default folders for the purpose of this recipe:

    $ compass create compass --sass-dir "sass" --css-dir "css" --javascripts-dir "javascripts" --images-dir "images"
    
  2. In the compass folder we've just created, you will find a folder called sass. Go ahead and create a new subfolder in there called cards and drop in our 12 images.

  3. We need to next fire up Scout, as it will be easier to compile the code this way. When open, click on + at the bottom-left corner of the Scout window, and add the following settings, as seen in the following screenshot, and leave all others as default. When complete, click on the Stop button to start scanning that folder for changes:

  4. Switch to Sublime Text 2, then create a new document and add the following code, saving it as imagesprites.scss:

    @import "compass";
    
    $cards-layout: horizontal;
    $cards-spacing: 5px;
    $cards-sprite-base-class: ".cards-icons";
    @import "cards/*.png";
    @include all-cards-sprites;
  5. The code should look like the following screenshot within Sublime Text 2:

  6. At the time of saving Scout should kick in, and create the sprite for you. If all is well, you will see an auto-generated PNG file appear in the sass folder, similar to cards-sad556f86f6.png. Opening it up will reveal something similar to the following screenshot:

How it works...

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.