Oh Sass! How awesome is it gonna get

I started writing Sass not too long ago and it has been one of the best experiences I’ve had. Sass (Syntatically Awesome Stylesheet) is just as awesome as the name sounds.

Sass is a CSS predecessor that gives smart designers a lot more flexibility with the styling. New features are being added to Sass and with contributions of the Google team, it’s getting even faster than you can imagine. This talk by Chris Eppstein reveals the work in progress.

Some of the common things that can be done with Sass are

VARIABLES

$color: #ff0000;
.warning
    color: $color

MIXINS

=border-radius($radius)
    -webkit-border-radius: $radius
    -moz-border-radius:    $radius
    -ms-border-radius:     $radius
    -o-border-radius:      $radius
    border-radius:         $radius

.object
     +border-radius(5px)

And that’s a sweet way to defeat repetition of vendor prefixes.

Extend (Inheritance)

.message
        border: 1px solid #ccc
        padding: 10px
        color: #333

.success
        @extend .message
        border-color: green

For most of the new features, Sass3 (SCSS) is used.

@each loop

@each $alert in success, warning, error{
  .#{$alert}-display {
    background-image: url('/images/#{$alert}.png');
  }
}

Thanks to Ben Frain, I learnt about maps from his blog.

You see how he had applied the @each loop in that article to handle a json encoded data by making use of maps this way

// Map
$colourList: (
    1  : (#000000, #000011),
    2  : (#000011, #000022),
    3  : (#000022, #000033),
    4  : (#000033, #000044),
    7  : (#000044, #000055),
    8  : (#000055, #000066),
    9  : (#000066, #000077),
    10 : (#000077, #000088),
);
// @each loop
@each $colourList, $keyNumber in $colourList {
    $background: nth($keyNumber, 1);
    $lowlight: nth($keyNumber, 2);
    header {
        .section_#{$colourList} & {
            background-color: $background;
            border-right: 2px dotted $lowlight;
        }
    }
}

There’s more to play with on Sass, @while loops, @for loops, @if statements, mathematical operations, and more. Head over to the Sass documentation to see more of them and join me in rocking this world of Sass.

Thinking why you may not need Sass if you can just write your CSS? Check out this screencast on some use cases by Chris Coyier