SCSS — a new icing from Sass

by Stryker

As I lately did almost no CSS/HTML jobs, I’ve missed the Sass3 release that implemented the SCSS extension (Sassy CSS). That’s a CSS extension without any syntax “distortion”, meaning that any valid CSS document is a valid SCSS document too. In this article, I’ll compare that release with some existing preprocessors, such as Sass and Less. Please note that the Sass syntax has been updated recently.

Introduction

Sass is the oldest CSS preprocessor. When it was released for the first time, its syntax scared a lot of web masters. For example, it was pretty weird that each rule began with a colon. Well, it was a tribute to Ruby’s Symbol type, but let’s not forget that CSS coding is rarely if ever done by Ruby programmers. To fix the issue, a group of enthusiasts has created Less, which has all the capabilities of Sass (variables, mixins, inheritance, and arithmetic) while supporting the native CSS syntax. Later, the Sass team has modified its syntax to create SCSS. Like Less, SCSS combines the syntax of CSS with the capabilities of Sass.

Here’s the list of capabilities and their implementation in each preprocessor:

Variables

Sass

$blue: #3bbfce
$margin: 16px
.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Less

@brand_color: #4D926F;
#header {
  color: @brand_color;
}

SCSS

$blue: #3bbfce;
$margin: 16px;
.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Basically, it’s not a big deal to take a look at the code and understand how variables work. Assigning colors now is a pretty simple job. Even if you need to change some color after your web project is partially or fully completed, all you need to do is to change one variable.

Inheritance

CSS

table.hl {
  margin: 2em 0;
}
  table.hl td.ln {
    text-align: right;
  }

Less/SCSS

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

Sass

table.hl
  margin: 2em 0
  td.ln
    text-align: right

Surely inheritance is just great!

Mixins

CSS

Basically, to make a mixin in CSS means to create a class that will be assigned to a few HTML elements.
Here’s an example with clearfix:

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}

Less

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded_corner;
}
#footer {
  .rounded_corners(10px);
}

SCSS

@mixin rounded_corners ($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
#footer {
  @include rounded_corners(10px);
}

Sass

@mixin rounded_corners ($radius)
  -moz-border-radius: $radius
  -webkit-border-radius: $radius
  border-radius: $radius
#footer
  @include rounded_corners(10px)

As you can see, you can pass arguments in a mixin, and that can be useful.

Arithmetic

Less

@the-border: 1px;
#header {
  border-left: @the-border;
  border-right: @the-border * 2;
}

SCSS

$the-border: 1px;
#header {
  border-left: $the-border;
  border-right: $the-border * 2;
}

Sass

$the-border: 1px
#header
  border-left: $the-border
  border-right: $the-border * 2

That was just a very simple example. I guess you can think of a few practical things you can do.

Conclusion

As you can see, the syntax both of Less and of SCSS is similar to that of CSS, and the preprocessors mostly provide some bells and whistles, though a little bit differently. For example, variables and mixins are declared in different ways. Sass and Less have some similarities in syntax too; the difference is that in Sass, blocks of selector rules are made with indents, not quotation marks, and lines don’t end with semicolons. In my opinion, that’s just excellent, as now you can save one line on each block.

Preprocessors are distributed as RubyGems.

SCSS, Sass

gem install haml</code>
<h5>Less</h5>
<code>gem install less

Thanks.

Tags | css, SCSS, Web development