Delicious CSS: Sass + Compass

What is Haml / Sass?

Haml (xHTML Abstraction Markup Language) is a markup language for simplified xHTML generation. In turn, the equivalent of Haml for css is Sass (Syntactically Awesome StyleSheets).

In this article I will tell you what Sass is notable for. And with the help of which the sass-file can be compiled into css.

So, let's begin.
')

SASS taste.

Sass has several advantages over css. I'll start with import . Import by itself is not an advantage of sass over css, but its use becomes even more justified because it is possible to connect a sass file with resets and a sass file with typography, a sass file with "constants" (more on this below). , the fourth sass-file with "abstract classes" (about it also below). Then it is all packaged in one ready css-ku. That eliminates the work with huge code.

And so constants . Suppose throughout the HTML document to some classes apply some css parameter, and suddenly we needed to change it. Let's say the selection of different elements of the four-pixel border in blue. And you need to replace it with a two-pixel one. Red. Even if it was only applicable to the three classes (in fact, it is), it already forces you to spend extra time. In such cases, it is advisable to use constants applicable to several elements at once.

Example:

 !main_color = #00ff00 #main :color = !main_color :p :background-color = !main_color :color #000000 
 

!main_color = #00ff00 #main :color = !main_color :p :background-color = !main_color :color #000000


"Abstract Classes" (Mixins) . This is a set of parameters initially not belonging to any element. But at any time you can add it to one or another parameter set of an element or class. Which sometimes is just as convenient.

Example:

 = large-text
   font
     : family Arial
     : size 20px
     : weight bold
   : color # ff0000

 .page-title
   + large-text
   : padding 4px
   : margin
     : top 10px 

Arithmetic Also one of the advantages of sass is arithmetic. This is the subtraction of colors from each other, and the division of the lengths of the objects, in general, everything. Thus, the color scheme can generally be set in one color, and the rest set by arithmetic. As a result, we change one color and op la-la and we have a new color scheme.

Example:

 ! main_width = 10px
 ! unit1 = 5px
 ! bg_color = # a5f39e

 #main
   : background-color =! bg_color
   p
     : background-color =! bg_color + # 202020
     : width =! main_width +! unit1 

Here are the most striking features of sass, the rest can be peeped in the official documentation .

Compass css framework.

Now the question is how to compile everything in css if we are not going to develop it under Ruby,
Not so long ago a very convenient css framework compass came out, just working under sass and allowing you to compile sass into css.

We create a compass project based on one of these css frameworks and start working, and the compass automatically monitors changes to sass files and compiles them into css.

Also compass supports 3 popular frameworks:

• Blueprint
• YUI
• 960gs

Here's a video about this sass and compass interaction.

UPD: Corrected the text about import