SASS – Syntatically Awesome Stylesheets

Categories: CSS, Programlama

As the official website says, Sass is an extension of CSS3, adding nested rules, variables,mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as ‘SCSS’ (for ‘Sassy CSS’), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension: .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension: .sass.

For example: A SCSS file looks like this:

$blue: #0000ff;
$margin: 10px;

@mixin table-base {
  th {
	@extend td;
	background-color: darken($blue, 10%);
    text-align: center;
    font-weight: bold
  td, th {
	padding: 2px;
	font-family: Tahoma, Arial, sans-serif

@mixin left($dist) {
  float: left;
  margin: $margin/2;
  margin-left: $dist;

#data {
  @include left(10px);
  @include table-base;
and when you compile it with SASS tool, it gives this output:

/* CSS */
#data {
  float: left;
  margin: 5px;
  margin-left: 10px; }
  #data th {
    background-color: #0000cc;
    text-align: center;
    font-weight: bold; }
  #data td, #data th, #data th {
    padding: 2px;
    font-size: 11px;
    font-family: Tahoma, Arial, sans-serif; }


In my next post, I’ll explain how to install it on Windows systems. Meanwhile, you could check it’s beautiful website which contains tutorials about SASS language and a detailed documentation.


Leave a Reply