Design, CG Graphics & Inspiration
SCSS — a new icing from Sass

SCSS — a new icing from Sass

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.

  • Splashnology Editors,
  • April 2, 2011

SHARE THIS POST

This post has been written by the team here at Splashnology.com

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.