Delicious CSS: Sass + Compass

What is Haml / Sass?

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

In this article I will tell you what is remarkable about Sass. And with what help the sass file can be compiled into css.

So, let's begin.

Tastes SASS.

Sass has several advantages over css. I'll start with import . By itself, the import is not an advantage sass to the css, but its use is all the more justified because it is possible to connect on by sass-file c reset and sass-file c typography, sass-file "constants" (see below for more details) , the fourth sass-file with "abstract classes" (more about this below). Then it is all packed into one ready-made css-ku. Which saves you from working with huge code.

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

Example:

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

"Abstract classes" (Mixins) . This set of parameters does not initially belong to any element. But at any moment it can be “added” to one or another set of parameters of an element or class. Which sometimes is also 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 subtracting colors from each other, and dividing the lengths of objects, in general, just about everything. Thus, the color scheme can generally be set in one color, and the rest set in 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

These are the most striking features of sass, the rest can be found in the official documentation .

Compass css framework.

Now the question is how to compile it all in css if we are not going to develop under Ruby.
Not so long ago a very convenient css framework compass was released , which just works under sass and allows you to compile sass in css.

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

Compass also supports 3 popular frameworks:

• Blueprint
• Yui
• 960gs

Here is a video about this interaction between sass and compass.

UPD: Corrected the text about import