Sass is one kind of CSS Preprocessor, it can make CSS development simple and maintainable. But to show its real power we may need to have Compass.

This article is to introduce Compass. Once you learn Compass, your CSS development efficiency will be largely improved.

Here we assume you have mastered the major uses of CSS, if you know Sass, then it's better. It's still ok if you don't know Sass.

1. What is Compass?

In simple, Compass it the toolkit of Sass.

Sass itself is only a compiler, Compass encapsulates some templates and modules based on Sass. The relationship between Sass and Compass is similar to the relationship between JavaScript and jQuery, between Ruby and Rails, between Python and Django.

2. Installation

Compass is developed with Ruby, so before installing it, you have to install Ruby.

Assume your machine(Linux or OS X) has Ruby installed, then type the following command in command line mode:

　　sudo gem install compass

If you are using Windows, then no need to type sudo.

3. Initialize project

Next, you need to create a new Compass project, assume its name is myproject, then type:

　　compass create myproject

There will be a directory myproject created in the current directory. cd into this directory：

　　cd myproject

You will find a config.rb file, this is the configuration file of your project. There are two subdirectories sass and stylesheets, the previous directory will store Sass source files, the later one will store the CSS files compiled.

Next, you can start writing codes.

4. Compilation

Before writing codes, we need to know how to compile codes. The source code file are suffixed with scss, we can use it in website only after compiling it to css file.

Compilation command :

　　compass compile

Run this command in the project's root directory, it will compile the scss files in sass subdirectory into CSS files and store them in stylesheets subdirectory.

By default, the compiled CSS file will have many comments. But in production environment, we may need compressed CSS file, now we can use --output-style.

　　compass compile --output-style compressed

Compass will only compile modified scss files, if you want to compile ass files, you need to use --force

　　compass compile --force

Compass also has other commands. For example:

　　compass watch

After running this command,  the scss files will be automatically compiled to CSS files as long as there are any changes to scss files.

More compass commands can be referred in its official document.

5. Modules of Compass

Compass has different modules, different modules have different functions. Currently there are five modules in compass.

　　* reset
　　* css3
　　* layout
　　* typography
　　* utilities

Next we will introduce these five modules one by one.

6. reset module

Usually before writing your own style, you need to reset browser default styles.

　　@import "compass/reset";

The above @import command will load specified module, here it is loading reset module.

7. CSS3 module

Currently this module provides 19 CSS3 commands. Here we introduce 3 of them: border-radius, opacity and inline block.

a. border-radius

　　@import "compass/css3";

　　.rounded {
　　　　@include border-radius(5px);
　　}

The above @include command means call some mixin(similar to macro in C), 5px is a parameter, here it specifies the radius of the round corner.

The codes after compilation is:

　　.rounded {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}

If you only need the top left border-radius, you can:

　　@include border-corner-radius(top, left, 5px);

b.opacity

　　@import "compass/css3";

　　#opacity {
　　　　@include opacity(0.5); 
　　}

After compilation, the code is:

　　#opacity {
　　　　filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
　　　　opacity: 0.5;
　　}

The parameter of opacity is 0.5 which means the alpha is 50%.

Complete transparent is:

　　@include opacity(0);

c. inline-block

　　@import "compass/css3";

　　#inline-block {
　　　　@include inline-block;
　　}

The code after compilation is:

　　#inline-block {
　　　　display: -moz-inline-stack;
　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　*vertical-align: auto;
　　　　zoom: 1;
　　　　*display: inline;
　　}

8. layout module

This module provides the layout functions.

For example, if you want the footer appears at the bottom of the page:

　　@import "compass/layout";

　　#footer {
　　　　@include sticky-footer(54px);
　　}

Or you want the child element stretch in the parent element:

　　@import "compass/layout";

　　#stretch-full {
　　　　@include stretch; 
　　}

9. typography module

For example, specify the link color:

　link-colors($normal, $hover, $active, $visited, $focus);

When using, write it as:

　　@import "compass/typography";

　　a {
　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
　　}

10. utilities module

This module provide some functions other modules don't provide.

For example, clear float:

　　import "compass/utilities/";

　　.clearfix {
　　　　@include clearfix;
　　}

Or table:

　　@import "compass/utilities";

　　table {
　　　　@include table-scaffolding;
　　}

After compilation:

　　table th {
　　　　text-align: center;
　　　　font-weight: bold;
　　}

　　table td,
　　table th {
　　　　padding: 2px;
　　}

　　table td.numeric,
　　table th.numeric {
　　　　text-align: right;
　　}

11. Helper function

In addition to modules, Compass also provides some functions. Some functions are very useful. For example, image-width() and image-height() will return image's width and height.

Also, inline-image() can convert the image into data conforming to data protocol.

　　@import "compass";

　　.icon { background-image: inline-image("icon.png");}

After compilation, you can get:

　　.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

The major difference between mixin and function is function doesn't need @include command.

Author : 阮一峰 Source : http://www.ruanyifeng.com/blog/2012/11/compass.html

Save as PDF Mark as read Mark as important

By clicking the "Mark as read" button, this article will be marked as read. It will be removed from the homepage's latest news and the article list on the "Technical article" page in following visits and it will be put to your read list which you can find in "Amin->Article read list". There you can unmark the read articles.
By clicking the "Mark as important" button, this article will be put to your important article list which you can find in "Amin->Article important list". Later when you want reread this article, it's easier for you to find it by checking the "Article important list".

Tags:Compass,CSS,Sass,Tutorial   Read(861) Comment(0)

               

 Previous : HTML5 Web Worker
 Next : Coming back, Nokia?

•  Short SASS tutorial
•  LESS/SASS/Stylus development tools summary
•  Apps and web apps and the future
•  I’m too lazy to be a HTML developer
•  Beauty of front end--List of front end tools used by GitHub
•  Magic CSS shape
•  How to teach "Modern" Perl?
•  CSS Box Shadow Illustration
•  CSS Overflow Property Utilization
•  CSS Tools: Reset CSS

No comment for this article.