An Overview of Compass 1.0

Share this article

Compass 1.0 was officially released on August 15th of this year. Many people steer clear of Compass due to the assumption that integrating Compass in your project is hard. This argument is kind of absurd when you consider that Compass commands are no more complex than writing a line of JavaScript.

Compass is a powerful tool if you are writing Sass, with built in mixins and functions that make writing complex sites a breeze. Most people pass on Compass because of the perceived learning curve, but as you will see the 1.0 release makes it easier than ever to use Compass.

Compass without the command line

Under normal circumstances you would initialize a project with Compass. This in turn creates a config.rb file that you use to configure various options. Many of these options are related to how the Compass compiler behaves. Even if you are not using Compass to compile your Sass you can still use Compass in your project.

It all starts with a partial named project-setup. Import this file into the Sass file you want to use with Compass.

_project-setup

$project-path: absolute-path("..");
$debug-configuration: true;
@import "compass/configuration";
@include compass-configuration($reconfigure:true);
http-path = "/";
images-dir = "img";
fonts-dir = "fonts";

Let’s take a look at the parts that make up this project-setup file.

$project-path: absolute-path("..");

Set to your absolute path of project, this global is used to initialize Compass when importing compass\configuration

$debug-configuration: true;

Compass will output Debugging information about the configuration.

@import "compass/configuration";

Initializes Compass and makes some utilities available.

@include compass-configuration($reconfigure:true);

Configures Compass according to your needs. If you need to call @include compass-configuration more than once (such as when you need to configure multiple options) then we pass the $reconfigure:true option to the mixin. This will allow you to set multiple options such as:

http-path = "/";
images-dir = "img";
fonts-dir = "fonts";

Anyone familiar with using Compass from the command line will notice these are many of the settings we were configuring in config.rb. Check out Compass configuration options for the full list of options and more information on using Compass without the command line. You will notice we do not have the option to specify the CSS and Sass directories like we do with Compass. Remember we probably aren’t compiling with Compass, just using its library.

Vendor prefixing

Compass uses data from caniuse.com to allow you to determine the level of support you intend to deliver for legacy browsers. By setting thresholds you can tell Compass what features you want to allow to degrade gracefully or to break. Compass will then automatically add or remove vendor prefixes based on the data from caniuse.com.

.round_border { @include border-radius(2px 5px, 3px 6px);}

This mixin will produce this CSS

.round_border {
    -webkit-border-radius: 2px 3px;
    -moz-border-radius: 2px 5px / 3px 6px;
    border-radius: 2px 5px / 3px 6px;
}

As you can see Compass has added the proper vendor prefixes for the respective browsers (-webkit for Chrome and -moz for Firefox). Also note that the webkit prefix doesn’t support shorthand so only the first value is passed. Lets take a look at some of the key variables that affect vendor prefixing:

$graceful-usage-threshold

This variable is for features that can degrade gracefully (like animation). Defaults to 0.1 (0.1%), when 1 in 1,000 users would be affected by removing a prefix it is removed. In the above example once Firefox usage reaches 0.1%

-moz-border-radius: 2px 5px / 3px 6px;

would be removed since this is the prefix for Firefox

$critical-usage-threshold

For CSS features that do not degrade gracefully,such as background-clip, its default value is 0.01 (0.01%). When 1 in 10,000 users would be affected the prefix is removed.

$browser-minimum-versions

In some situations we may want to support a browser no matter how many people are using it. In this case we can set the minimum browser version for each known browser.

$supported-browsers

Defines which browsers your site supports. All browsers are enabled by default, but you can disable specific browsers by rejecting them from the list. Go here for more info on Vendor prefixing.

Source Maps Support

If you have ever developed a large site based on Sass you know it can be a challenge tracking down bugs. Source Maps allow you to see the underlying Sass that generated your CSS enabling developers to quickly track down problem code. To enable Source Map support in Compass all it takes is to add this line to your config.rb file:

sourcemap = true

Now the compass watch command will generate CSS map files. After that all you have to do is enable Chrome DevTools or Firefox developer tools.

Support for newer CSS

The real reason to use Compass is because of all the tools that are available to use in your projects. This extends to newer CSS developments such as Animation. Compass includes plenty of mixins to create animations in your projects easily. Beyond that Compass includes plenty of tools and utilities to use these newer features. For more information check out the Compass CSS page.

Conclusion

These are just some of the features that the official release of Compass offers. If you haven’t tried out Compass yet I would suggest you give it a try. I guarantee you will find a function or mixin that will be of use in your projects.

Reggie DawsonReggie Dawson
View Author

Reggie is a longtime Network Admin who has finally seen the error of his ways and has come over to the darkside: development. He likes to hack together web projects in his spare time using Angular, Compass, Sass, Bootstrap, or Foundation.

compassCompass 1.0sasssass frameworkStuR
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week