Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | A Quick Look at Compass
3924
single,single-post,postid-3924,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
compass-logo

A Quick Look at Compass

compass-logo

Compass is an open source CSS framework that streamlines the process of, and relieves some headaches associated with styling websites.

It consists of a Ruby command-line interface (CLI) and the Sass language. Sass, as a language, is essentially CSS with basic programming features added that gets compiled down into actual CSS files upon save if it’s directory is being “watched”. On top of these wonderful additions, Compass adds access to a large library of pre-written CSS snippets that can make your life much, much easier.

Once you’ve got compass installed it’s simple to create a project. Open terminal, navigate to the desired location, and create it!

0.1

By its default settings, Compass has created the following project structure but you can customize the creation to your hearts delight.

 

3

 

Now we just have to make Compass “watch” our files so when we save a “.scss” file (in the “sass folder), it’ll automatically create a “.css” file for us (in the “stylesheets” folder).

 

0.2

 

The main goal of compass is to write CSS faster and with less brain pain. This is accomplished by allowing us to write little Sass to produce a lot of CSS. One headache associated with CSS is vendor prefixing, something nobody wants to have to remember. Here’s an example of how Compass helps, using the  “border-radius” property. We write this:

1.1

Compass makes this:

1.2

Common and annoying styling tasks can also be alleviated. In case you don’t know, making a horizontal list with CSS is a bit cumbersome. With Compass, however, we just write this:

2.1

Compass makes this:

2.2

You may have noticed the “@import” statements at the top of the Sass files. We have to import the appropriate file for every feature of Compass that we want to use. This may seem tough to remember, but it’s all documented very well. For this documentation and installation instructions, check out compass-style.org.

We’ve just looked at a couple examples of how using Sass and Compass can help us out, but the rabbit hole goes on much deeper. Check it out sometime!