Compass - a tool to work effectively with CSS

With the release of CSS3, many innovations have appeared: with new properties, styles have become more complex, but no improvements have appeared to support new and old complexities, including duplication of code. In pure CSS, there is no modularity, since splitting styles into files and connecting them via @import detrimental effect on performance.
The solution to these problems was found in CSS preprocessors, with their help it became possible to use variables, perform mathematical calculations in the code, it became possible to reuse the code using mixins and inheritance. The ideology of preprocessors is based on the logical separation of style files by context - the problem of modularity has been solved. Of course, the advantage is to reduce the risk of code conflicts in the team, navigation through the code becomes much more convenient. Also, preprocessors have the opportunity to generate code using cycles, in SASS it looks like this:

 /* SCSS */ $animals: puma, sea-slug, salamander; @each $animal in $animals { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } 

 /*  CSS */ .puma-icon { background-image: url("/images/puma.png"); } .sea-slug-icon { background-image: url("/images/sea-slug.png"); } .salamander-icon { background-image: url("/images/salamander.png"); } 

or:

 /* SCSS */ @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } 

 /*  CSS */ .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } 

A little about Compass

Compass is more than a CSS preprocessor, Compass developers position it as a design framework. Compass uses SASS syntax (.sass or .scss), so any SASS code will be compiled into Compass.
One of the main concepts of Compass is modularity and simplification of style support, which allows concentrating on styling, spending minimal efforts on supporting old browsers, therefore Compass has a wide functionality and works with most CSS frameworks:
- A huge number of built-in mixins for working with images, CSS3, fonts, layouts;
- utilities for working with color, sprites and styling of basic elements such as lists, tables, links;
- Built-in CSS reset;
- normalize.css;
- HTML5 Boilerplate, Blueprint, Twitter Bootstrap;
- Grid systems (Fluid 960, Singularity, 960.gs, Susy, Zen grids, and others.)
- Widgets (Fancy Buttons, Sassy Buttons);
- CSS3 PIE;
')
List of Compass mixins by category here , a more complete list of Compass modules here .

How to start with Compass

Compass is written in Ruby and installed from the gem package manager ( Ruby installed is required):

 $ gem update --system $ gem install compass $ compass create <myproject> /*  compass  */ $ compass watch [path/to/compass-project] /*  Compass     [path/to/compass-project]*/ 

Scout , Compass.app - for those who do not like to mess around with the command line.

Installing the Compass extension is also quite simple:

1. Install the extension:

 $ gem install {extension} 

2. Add to the beginning of the config.rb file in the Compass project:

 require '{extension}' 

3. Connect the extension:

 @import '{extension}'; 

Let's take a look at the benefits of using Compass in business.

Automatically generated sprites

At the development stage, quite often it is necessary to update the sprites, and in most cases this routine action is done manually. Compass offers a different approach for generating sprites — mapping images to a sprite variable (http://compass-style.org/reference/compass/helpers/sprites/):

 /* SCSS */ $arrows: sprite-map("arrows/*.png"); //      arrows 

or you can declare a sprite with non-standard settings:

 /* SCSS */ /*       : vertical( ), horizontal, diagonal, smart */ $<arrows-dirname>-layout: smart; $arrows: sprite-map("<arrows-dirname>/*.png", $position: 100%, $spacing: 25px, /*    */ $arrows-arrow-down-spacing: 10px /*     <arrows-dirname>/arrow-down.png */ ); 

The $ icons sprite variable can now be used in the background property using the sprite mixin:

 /* SCSS */ background: sprite($arrows, arrow-down) no-repeat; 

 /*  CSS */ background: url('/<arrows-dirname>/arrow-down.png?12345678') 0 -24px no-repeat; 

When adding a new image to the <arrows-dirname> folder, Compass will regenerate the sprite, no need to worry about background-position — Compass substitutes the necessary values ​​to display the corresponding images.

Convenient to work with fonts and sizes

Compass is a handy tool for working with fonts.
In CSS, adding a custom font looks like this:

 /* CSS */ @font-face { font-family: "PacificoRegular"; src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot'); src: url('[project-root]/fonts/pacifico/Pacifico-webfont.eot?#iefix') format('eot'), url('[project-root]/fonts/pacifico/Pacifico-webfont.woff') format('woff'), url('[project-root]/fonts/pacifico/Pacifico-webfont.ttf') format('truetype'), url('[project-root]/fonts/pacifico/Pacifico-webfont.svg') format('svg'); } 

An example using the built-in Compass font-face mix:

 /* SCSS */ @include font-face("PacificoRegular", font-files( "pacifico/Pacifico-webfont.woff", "pacifico/Pacifico-webfont.ttf", "pacifico/Pacifico-webfont.svg" ), "pacifico/Pacifico-webfont.eot" /*    .eot   IE */ ); 

Working with em-s as font size is not always the most pleasant in CSS due to additional mathematical calculations, but Compass makes it easier to work with them:

 /* SCSS */ $base-font-size: 14px; /*    */ div{ @include adjust-font-size-to(28px); /* @adjust-font-size-to() -      */ h1 { @include adjust-font-size-to(32px, $from-size: 28px); /*  $from-size        em */ } } 

 /*  CSS */ body { font-size: 0.875em; // 0.875 * 16px = 14px } div { font-size: 2em; // 2 * 14px = 28px } div h1 { font-size: 1.143em;// 1.143 * 28px = 32px } 

When working with em, it is better to avoid font inheritance, but the example above shows how to deal with similar situations in Compass.
Compass also works with Vertical Rhythms ( more on Vertical Rhythms ).

Vendor prefixes

Compass built-in mixins support vendor prefix generation. Example:

 /* SCSS */ .round { @include border-radius(4px); } 

 /*  CSS */ .round { -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } 

Prefix configuration is possible:

 /* SCSS */ $experimental-support-for-mozilla : true; // !default; $experimental-support-for-webkit : true; // !default; $support-for-original-webkit-gradients : true; // !default; $experimental-support-for-microsoft : true; // !default; $experimental-support-for-opera : false; $experimental-support-for-khtml : false; .round { @include border-radius(4px); } 

 /*  CSS */ .round { -moz-border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } 

Gradients

To work with gradients, Compass has 2 linear-gradient and radial-gradient inline mixins that are used in conjunction with background-image or background mississins:

 /* SCSS */ @import "compass/css3/images"; @import "compass/utilities/general/hacks"; /*   @filter-gradient */ .item { /*  IE,      @linear-gradient      IE  */ @include filter-gradient(#aaaaaa, #eeeeee); /* Fallback: */ background: #cccccc; /* CSS3 c   */ @include background(linear-gradient(top, #aaaaaa, #eeeeee)); } 

 /*  CSS */ .item { *zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')"; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE'); background: #cccccc; /*    */ background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee)); background: -moz-linear-gradient(top, #aaaaaa, #eeeeee); background: -o-linear-gradient(top, #aaaaaa, #eeeeee); background: linear-gradient(top, #aaaaaa, #eeeeee); } 

Another example of using gradients.

Media queries

Compass has a very useful Breakpoint module for working with media queries. Breakpoint allows you to collect media queries in one style block, which is structured and improves the readability of the code:

 /* SCSS */ $small: 543px; $medium: 794px; $fence-sm: $small $medium; #foo { content: 'No Media Queries'; @include breakpoint($small) { content: 'Small Media Query'; } @include breakpoint($fence-sm) { content: 'Fenced Media Query'; } } 

 /*  CSS */ #foo { content: 'No Media Queries'; } @media (min-width: 543px) { #foo { content: 'Small Media Query'; } } @media (min-width: 543px) and (max-width: 794px) { #foo { content: 'Fenced Media Query'; } } 

Examples of more complex queries with "AND", "OR" logic:

 /* SCSS */ $print-land: print monochrome (orientation landscape); $fenced-landscape: screen 321px 543px, handheld (orientation portrait); /*   screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) */ #foo { @include breakpoint($print-land) { content: 'Monochrome Print in Landscape'; } @include breakpoint($fence-landscape) { content: 'Screen media type between 300px and 500px or Handheld media type in Portrait'; } } 

 /*  CSS */ @media print and (monochrome) and (orientation: landscape) { #foo { content: 'Monochrome Print in Landscape'; } } @media screen and (min-width: 321px) and (max-width: 543px), handheld and (orientation: portrait) { #foo { content: 'Screen media type between 321px and 543px or Handheld media type in Portrait'; } } 

Results

Compass is a powerful developer tool that helps you quickly write efficient and cross-browser CSS code. It should also be noted that Compass is a useful tool for rapid prototyping in the browser and works in conjunction with LiveReload.
Do not forget that Compass is just a tool, but its clever use gives impressive results and eliminates a lot of routine work.