Using Compass Layout Module

In this last recipe, you can read about the Compass Layout Module. Compass is an open-source CSS framework for Sass. You can read more about Compass in Chapter 6, Using Compass. The code in this recipe demonstrates how to use the Compass Layout Module to generate fixed, fluid, and elastic grid-images on-the-fly using CSS3 gradients.

Getting ready

Read Chapter 6, Using Compass, to learn more about Compass. Also read the Installing Sass for command line usage recipe of Chapter 1, Getting Started with Sass. This recipe uses the SCSS you have used for the Creating grids with semantic.gs recipe.

How to do it...

Learn how to use the Compass Layout Module by performing the following steps:

1. Copy the files from the Creating grids with semantic.gs recipe into your working directory.

2. Then, edit the sass/main.scss file and make sure it contains the following SCSS after that:

   @import 'semantic.gs/stylesheets/scss/grid';
   @import 'compass/layout/grid-background';
   
   $column-width: 60...