If you’ve starting learning SASS basics and are using it within your project, you may want to start using SASS with Compass, a CSS authoring framework.
Compass effectively adds a layer on top of SASS, allowing you to create mixins and sprites with ease, output SASS into compressed CSS and many more features. Sadly Compass is no longer actively maintained as of 2015, but it is still commonly used in many web applications.
Compass, like Sass, is installed using RubyGems.
$ gem install compassIf you’ve installed Compass correctly, you should be able to obtain the version installed.
$ compass version
Compass 1.0.3 (Polaris)Compass provides a create which will create a skeleton project. Run this command, passing in the directory location you would like to create the project in.
Compass will then create some directories and files for you.
$ compass create ~/desktop/compass-project
directory desktop/compass-project/
directory desktop/compass-project/sass/
directory desktop/compass-project/stylesheets/
create desktop/compass-project/config.rb
create desktop/compass-project/sass/screen.scss
create desktop/compass-project/sass/print.scss
create desktop/compass-project/sass/ie.scss
write desktop/compass-project/stylesheets/ie.css
write desktop/compass-project/stylesheets/print.css
write desktop/compass-project/stylesheets/screen.cssCompass will also prompt you to use the following markup within an HTML document should you wish to create one, to test out your CSS changes.
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>Within the project, we have a screen.css, print.css and ie.css .css files, and their .scss files.
To automatically output changes made in the .scss files to the .css files, cd into your Compass project and run the watch command.
$ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.To test this, add some styles to the bottom of the screen.scss file.
// sass/screen.scss
.container {
margin: 5px 0;
.sub {
float: right;
}
}Now look at screen.css and you’ll see that the styles have been compiled into CSS!
// stylesheets/screen.scss
/* line 8, ../sass/screen.scss */
.container {
margin: 5px 0;
}
/* line 10, ../sass/screen.scss */
.container .sub {
float: right;
}The output within terminal will also notify you of changes.
>>> Compass is watching for changes. Press Ctrl-C to Stop.
modified sass/screen.scss
write stylesheets/screen.css
As mentioned above, the CSS output can compressed. To do this, you should se a config.rb configuration file within the root of your Compass project.
Within this file, there are useful comments regarding the output of the CSS, and you are advised to add the following line within the config file to compress the CSS.
output_style = :compressedNote that if Compass is already watching for changes whilst this configuration value has been changed, you will need to restart Compass to see the output of the CSS change.
Keeping CSS files up to date automatically and having the option to compress the output are a couple of the many benefits that Compass provides. Next we’ll take a look into some of the CSS3 support that the framework provides, and how to generate sprites.