Getting Started with Sass & Compass: Part 2

This is the Part 2 of “Getting Started with Sass & Compass“. It is recomended to read that one first.

Sass is great, but you will need to make your own mixins for all the prefixes and stuff that you usually use. This is where Compass comes!

SO, WHAT IS COMPASS?

Compass, essentially, is a style library for Sass. But that is not all.

1. It’s full of reusable patterns.
2. It makes creating sprites a breeze.
3. Compass mixins make CSS3 easy without having to make your own mixins for CSS3.

So essentially, you may think of it as an “add-on” for sass. It is built to help you code faster.

BEFORE WE DIG INTO COMPASS, WE WILL SEE THE FOLDER STRUCTURE:

All your sass files need to be inside a folder. I prefer to name this folder styles. This way it has a short name and it is more generic as it will host both your sass and css files.
Then, inside it you will have :

• a folder named css that will include your compiled css file and
• a sass folder that will include your .scss files

It is best for both css and scss files to be in the same depth of folders so that relative paths, such as web fonts and images, can work properly.

Depending on your project, the folder structure you use can differ. You may find a great example in thesassway.com but you can use something that best fits your needs, like so:

styles/
|
|-- css/	#includes your compiled css file
|
|-- partials/
|	|
|	|-- _reset.scss	
|	|-- _colors.scss	
|	|-- _typography.scss	
|	|-- _buttons.scss	
|	|-- _forms.scss	
|	|-- _animations.scss	
|	|-- ...	
|
|-- vendor/	# CSS or Sass from other projects & libraries
|	|
|	|-- _colorPicker.scss	
|	|-- ...	
|
|-- main/
|	|
|	|-- main.scss	#Primary sass file that imports all other sass files(partials)

I like to keep my main.scss file and the generated css file to the same folder level so all relative paths work correctly everywhere. This way i can also use the autocomplete my IDE offers.

In the html you must only include the compiled css file:

<link rel="stylesheet" type="text/css" media="all" href="styles/css/main.css" />

In the main.scss file you will import the partials like so:

@import "../partials/_reset";

HOW DO YOU USE COMPASS?

First, you will need to install it.

Open your command line tool and type:

gem install compass

This will download and install Compass on your computer. To create a new project you may use the command line and type

compass create project-name

When you run the above command, it will create a configuration file for you.  Alternatively, you may simply create your configuration file. This is very helpful if you mostly work on the same project type, eg building websites. The configuration file is actually a Ruby file called config.rb:

require 'compass/import-once/activate'

add_import_path "partials"
# Require any additional compass plugins here.

project_type = :stand_alone

# Set this to the root of your styles folder when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "main"
images_dir = "images"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed	#possible values are    :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

As you can see you may configure many options, like the style for the compiled css file: I prefer :compressed as it will automatically minify my css file.

To compile your sass files, you will have to use the command line. go to the directory styles and type

compass compile

If you work on a project, you will find the auto-compile or “watch” option very helpful. What it does is that it automatically checks for changes in our code and produces your css file as you work. To use this, instead of typing the above command every time you make a change, you simply type:

compass watch

Both fo the above commands will compile the css file for you, according to the settings on the configuration file.

CODE WITH COMPASS

At the very top of your main.scss file you will need to import compass. You may import the complete Compass library, or just the library you are interested to, for example:

@import "compass/css3";

You may find the official reference for the Compass CSS3 library here.

However, this reference is a bit chaotic and personally think it should have more examples. So i will list the most common uses:

@include background-size(cover);
@include transform(translate(-50%, -50%));
@include transition-duration(277ms);
@include box-sizing(border-box);
@include opacity(0);
@include border-radius(50%);
@include background-image(linear-gradient(to bottom right, white, #dddddd));  
    #http://compass-style.org/examples/compass/css3/gradient/
@include box-shadow(red 2px 2px 10px);
@include transform-origin(left bottom);
@include perspective(500px)
@include perspective-origin(origin-x [origin-y])
@include transition-timing-function(ease-in); 
@include transition-timing-function(cubic-bezier(.16,.01,.77,1));
@include transition-delay(2s);
@include selection($link_color, #fff);  //text selection (bgcolor, color)
@include word-break(break-all);
@include filter(grayscale(50%));
@include filter(blur(2px));

You will notice that pretty much everything is straightforward as the mixin name is the same as the CSS property. There are many more in the Compass library, the above are only mentioned as examples to help you get started.

KEYFRAMES WITH COMPASS

Writing keyframes becomes extremely easy as you will only have to set it once, like so:

@include keyframes(background-move) {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

then, to use it in your css file, you would type:

@include animation(background-move 2s infinite linear alternate-reverse);

Compass gives you many more tools and you can find them on their website. A great tool that i have to mention is the sprites generator.

For those that don’t like the command line, there is also a graphic environment app to help you out.

That’s it! Hope this article was helpful! Happy coding!