Sass Tutorial

Sass logo

What is SASS

• Sass is template language that converts to CSS.
• Sass is popular in Ruby community.
• Sass is often used together with HAML.
• Sass is created in 2007 by Hampton Catlin (born 1982)

If you have installed haml, you'd also have sass.

SASS vs SCSS

Sass has 2 variations:

• SASS, is indentation based syntax. Sass files ends in .sass
• SCSS, has similar syntax as CSS. SCSS files ends in .scss

Variable begin with dollar sign $.

In the beginning, there's the SASS syntax, similar to haml. Later, a SCSS syntax is invented. This syntax is compatible with CSS.

Here's comparsion syntax:

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 20%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

--blue: #3bbfce
--margin: 16px

.content-navigation {
  border-color: var(--blue);
  color: #2b9eab; /*no darken function, unless using hsl color syntax*/
}

.border {
  padding: calc(var(--margin) / 2);
  margin: calc(var(--margin) / 2);
  border-color: var(--blue);
}

Sass Nested Syntax

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

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

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

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

mixin, include

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

#data {
  @include table-base;
}

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}