Sass Tutorial

, , …,
Sass logo
Sass logo (2014) 〔img src http://sass-lang.com/styleguide/brand/, ©
Sass logo
old Sass logo (≈2006 〜 2013)

Sass is a CSS template language, very popular with the Ruby community. 〔➤ Xah Ruby Tutorial: Learn Ruby in 1 Hour〕 It is used in Ruby code to generate CSS on the fly. 〔➤ Visual Dictionary of CSS

Sass is often used together with Haml. HAML is a template language for generating HTML. 〔➤ HAML Tutorial

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

sass has 2 type of syntax.

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 of 3 syntaxs:

$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;
}
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

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;
}

See also: What's Slim Markup?.

blog comments powered by Disqus