What’s cool in Haml/Sass 3.1 ?

Haml and Sass 3.1 released. You can install them now with two separated gems:

yitsushi@code-infection ~ > gem install haml
yitsushi@code-infection ~ > gem install sass

The biggest change between Haml 3.0 and Haml 3.1 by far is the removal of Sass (from v3.0.22).

(more info in the Haml changelog)

Sass has lots of exciting changes. (more info in the Sass changelog)

Let’s look at what’s new in Sass.

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

We can declare a normal function what is not just a property group with parameter. Pretty cool.

This is a function named grid-width what can calculate the width of grid cells. The result of the function is marked with @return. You can use some other functions like @if and @for.

Keyword arguments

Mixins and functions now support keyword arguments. Instead of memorizing the order of arguments for each mixin/function, you can pass the arguments in any order by naming them. Example:

@mixin border-radius($value, $moz: true, $webkit: true, $css3: true) {
  @if $moz { -moz-border-radius: $value }
  @if $webkit { -webkit-border-radius: $value }
  @if $css3 { border-radius: $value }
}

@include border-radius(10px, $webkit: false)

This sets the $webkit argument to false while leaving the other arguments to their default values.

@each (my personal favorite)

Sass also adds the @each directive which assigns a variable to each item in a list in turn just like @for does for numbers. Example:

@each $menu_type in text, video, quote, image {
  .blog-#{$menu_type} {
    background-image: url('../images/blog/type_#{$menu_type}.png');
  }
}

Compiled to

blog-text {
  background-image: url('../images/blog/type_text.png');
}
blog-video {
  background-image: url('../images/blog/type_video.png');
}
blog-quote {
  background-image: url('../images/blog/type_quote.png');
}
blog-image {
  background-image: url('../images/blog/type_image.png');
}

On Tuesday when I go to work I make some test about it and try to migrate our PHP and Ruby systems.

Notice: If you already have Haml installed (old version) and you want to execute the gem update command then don’t forget gem install sass because it will not be installed (remains the old version)