Syntactically Awesome Stylesheets: Using Compass in Sass

In our last post, we have mentioned once about Compass. According to the official site, it is described as an open-source CSS Authoring Framework.

In short, Compass is a Sass extension and, like LESS Element of LESS, it has a bunch of ready-to-use CSS3 Mixins, except it has also added several other stuff that make it a more powerful companion tool to Sass. Let’s check it out.

Installing Compass

Compass, like Sass, needs to be installed in our system. But, if you are using an application like Scout App or Compass.app, this will not be necessary.

Without them, you need to do it “manually” through Terminal/Command Prompt. To do so, type the following command line;

On Mac/Linux Terminal

sudo gem install compass

On Windows Command Prompt

gem install compass

If the installation succeeds, you should get a notification as shown below;

Then, run the following command line in your working directory to add Compass project files.

compass init

Further Reading: Compass Command Line Documentation

Compass Configuration

If you have run this command compass init, you should now have a file named config.rb in your working directory. This file is used to configure the project output. For example, we can change our preferred directory names.

http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

Strip out the comment line that is generated by Compass; we set true if we need the comments to be printed or false if it doesn’t have to.

line_comments = false

We can also decide the CSS output. There are four options we can select :expanded, :compact, :compressedand :nested. For now, we just need it to be expanded as we are still in the development stage.

output_style = :expanded

I think these configurations will suffice for most projects in general, but you can always refer to this documentation, Compass Configuration Reference if you need more preferences.

Lastly, we need to watch every file in the directory with this command line;

compass watch

This command line, as in Sass, will watch every file change, and create or update the corresponding CSS files. But remember, run this line after you have done configuring the project in config.rb, or else it will just ignore the changes in the file.

CSS3 Mixins

Before walking through CSS3, in our primary .scss file, we need to import the Compass with the following line @import "compass";, this will import all the extensions in Compass. But, if we need only CSS3 we can also do it more specifically with this line @import "compass/css3".

Further Reading: Compass CSS3.

Now, let’s start creating something with Saas and Compass. In the HTML document, assuming that you also have created one, we will put the following simple markup:

<section>
	<div> </div>
</section>

The idea is also simple; we will create a rotated box with rounded corners, and below is our Sass nested styles for the starter;

body {
	background-color: #f3f3f3;
}
section	{
	width: 500px;
  	margin: 50px auto 0;
	div {
		width: 250px;
		height: 250px;
		background-color: #ccc;
		margin: 0 auto;
	}
}

And, to get our rectangle the rounded corners, we can include the Compass CSS3 Mixins as follows;

body {
	background-color: #f3f3f3;
}
section	{
	width: 500px;
  	margin: 50px auto 0;
	div {
		width: 250px;
		height: 250px;
		background-color: #ccc;
		margin: 0 auto;
		@include border-radius;
	}
}

This border-radius Mixins will generate all the browser prefixes and, by default, the corner radius will be 5px. But, we can also specify the radius to our need this way @include border-radius(10px); }.

section div {
  width: 250px;
  height: 250px;
  background-color: #ccc;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Next, as the plan we will also rotate the box. It’s really easy to do it with Compass, all we need to do is just call the transformation method, like so;

body {
	background-color: #f3f3f3;
}
section	{
	width: 500px;
  	margin: 50px auto 0;
	div {
		width: 250px;
		height: 250px;
		background-color: #ccc;
		margin: 0 auto;
		@include border-radius(10px);
		@include rotate;
	}
}

This Mixins will also generate those tedious vendor prefixes and the rotation will take 45 degree by default. See the generated CSS below.

section div {
  width: 250px;
  height: 250px;
  background-color: #ccc;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

Compass Helpers

One of the most powerful features in Compass is the Helpers. According to the official site, The compass helpers are functions that augment the functions provided by Sass. Alright, let’s take a look at the following examples to get a clear picture.

Adding @Font-face files

In this example, we are going to add custom font family with @font-face rule. In plain CSS3, the code may look something like this below, consisting of four different font types and it is also hard to remember for some people.

@font-face {
  font-family: "MyFont";
  src:  url('/fonts/font.ttf') format('truetype'),
  		url('/fonts/font.otf') format('opentype'),
  		url('/fonts/font.woff') format('woff'),
  		url('/fonts/font.eot') format('embedded-opentype');
}

With Compass we can do the same more easily with font-files() Helpers;

@include font-face("MyFont", font-files("font.ttf", "font.otf", "font.woff", "font.eot"));

The code above will generate a result that is exactly the same as the first code snippet, it will also automatically detect the font type and add it to the format() syntax.

However, if we take a look at the code closely, you will see that we did not add the font path (/fonts/). So, how did Compass know where the fonts are located? Well, don’t get confused, this path is actually derived from config.rb with fonts_path property;

fonts_dir = "fonts"

So, let’s say we change it to fonts_dir = "myfonts", then the generated code will be url('/myfonts/font.ttf'). By default, when we are not specifying the path, Compass will direct it to stylesheets/fonts.

Adding Image

Let’s create another example, this time we will be adding an image. Adding images through CSS is a common thing. We generally do this by using the background-image property, like so;

div {
	background-image: url('/img/the-image.png');
}

In Compass, rather than using the url() function, we can replace it with image-url() Helpers and similar to adding @font-face above, we can completely ignore the path and let Compass handle the rest.

This code will also generate the exact same CSS declaration as in the first snippet.

div {
	background-image: image-url(the-image.png);
}

In addition, Compass also has Image Dimension Helpers, it primarily detects the image width and height, so in case we need them both to be specified in our CSS we can add two more lines, as follows;

div {
	background-image: image-url("images.png");
	width: image-width("images.png");
	height: image-height("images.png"); 
}

The output will become something like this;

div {
  background-image: url('/img/images.png?1344774650');
  width: 80px;
  height: 80px;
}

Further Reading: Compass Helper Functions

Final Thought

Alright, we have discussed quite a lot about Compass today and as you can see it’s really a powerful tool and let us write CSS in a more elegant way.

And, as you already knew, Sass is not the only CSS Preprocessor; there is also LESS which we have thoroughly discussed before. In the next post, we will try to compare, head-to-head, which one of these two does the job better in preprocessing CSS.

• Download Source