Anybody who’s built a website of any size knows how quickly CSS can get out of hand. Style sheets can grow bloated and lengthy, making it difficult to find things, introducing redundancy and producing an end product that makes code maintenance tedious. Let’s face it — CSS is not very well-designed. Over the years, a number of solutions have cropped up that attempt to deal with these problems. One of the most popular is the CSS framework, COMPASS. Below, we’ll give you a quick introduction to how COMPASS works, and some tips on how to make it work for you.
What is COMPASS?
COMPASS is an open source CSS authoring framework written in Ruby that attempts to fix a lot of the shortcomings of CSS. It also streamlines development by providing a number of utilities and tools to make writing your CSS files easier and faster. Those features include:
- Support for variables and mixins.
- SASS-style nesting of CSS rules.
- Helper functions for images, fonts, colors and more, including mathematical calculations.
- Flexible tools for ensuring cross-browser compatibility and graceful fallback states.
- Integration of a Blueprint module, including several default styles for rapid prototyping and styling commonly used elements.
With all that and dozens more tidbits to offer, COMPASS provides a robust authoring environment for CSS creation that automatically monitors your code as you write it, compiling it down to pure CSS for use on your site. So while the COMPASS gem is needed for authoring, your website needs no special software or libraries to display CSS written in COMPASS.
How Does COMPASS Work?
Now that we’ve gone over what COMPASS is and discussed a few of its features, let’s take a look at some of them in action. In this, we’ll use a few variables and a custom mixin, as well as an image helper and nesting to show how COMPASS makes it easy to reuse content throughout your CSS files.
$dark-accent: #333;
$light-accent: #eee;
@mixin default_fonts {
font-family: helvetica;
font-size: 10pt;
color: $dark-accent;
}
#info_box {
width: 400px;
height: 300px;
padding: 10pt;
border: 1px solid $dark-accent;
background: $light-accent;
@include default_fonts;
input[type=button] {
background: image-url('button.png') top left repeat-x;
color: #fff;
font-weight: bold;
border: none;
}
}
Here you see that we’ve set up a couple of variables (dark and light accent) which we use in the mixin, in addition to the CSS rules for our info box.
Next, the mixin itself contains the rules for our default fonts. After that comes an example of how nesting works. The rules for our input button, in this example, only apply to those found within the info box.
Finally, the image URL helper here is used to generate the output for the background image, so we don’t have to type the full image path each time (path information is defined in a small config file that sits in the root directory of your project).
Now let’s take a look at the COMPASS-compiled output:
/* line 10, ../sass/demo.scss */
#info_box {
width: 400px;
height: 300px;
padding: 10pt;
border: 1px solid #333333;
background: #eeeeee;
font-family: helvetica;
font-size: 10pt;
color: #333333;
}
/* line 18, ../sass/demo.scss */
#info_box input[type=button] {
background: url('/images/button.png') top left repeat-x;
color: #fff;
font-weight: bold;
border: none;
}
As you can see, the mixins become included, variables substituted, image URLs generated, and inheritance is determined via the nesting. When generating the CSS, COMPASS also includes comments that clearly show us where each element is defined in its corresponding CSS file. If there’s an error at the time of generation, COMPASS will drop a helpful stack trace right into the CSS file where the error occurs.
At first glance, the original COMPASS code may look more verbose than the generated CSS output, but when you consider that those variables and mixins can be used throughout your entire project, you begin to see the advantages. COMPASS all but eliminates the need for adding presentational classes (e.g. “align-right” or “big-text”) without making you constantly repeat yourself. In addition, it’s feasible to completely change a color scheme for an entire project simply by updating a few variables and perhaps changing an image path or two.
This is only a small example of the power and flexibility COMPASS offers, but you can begin to see its amazing potential.
Where to Go From Here
Keep in mind that COMPASS uses SASS and Blueprint, so you may want to read up on those as well. You’ll also need a working installation of Ruby and RubyGems to install and use COMPASS. source:
http://mashable.comsource:
Tuesday, February 28, 2012
