SASS and HAML

Sep 27, 2010
Episode 38
In this week's episode, Nick shows you how to clean up your CSS with SASS and Jim demonstrates how to simplify your HTML with HAML.
Spotlight

Thanks to those who make Doctype possible!

SASS

SASS is an acronym that stands for Syntactically Awesome Style Sheets. It’s an extension of CSS3 that allows you to add in advanced concepts like nested rules, variables, mixins, and more. You can vastly simplify your CSS and make it a lot more powerful.

You can download the code at http://sass-lang.com.

Installation

To install SASS, you’ll need to install Ruby first, and then install HAML.

Syntax

SASS 3 supports the new .scss syntax, but this episode opts to teach the indented syntax. Here are the code examples from this episode:

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

li
  font:
    family: serif
    weight: bold
    size: 1.2em
Variables
$blue: #3bbfce
$margin: 16px

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

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue
Mixins
@mixin table-base
  th
    text-align: center
    font-weight: bold
  td, th
    padding: 2px

@mixin left($dist)
  float: left
  margin-left: $dist

#data
  @include left(10px)
  @include table-base

HAML

HAML is an templating language that abstracts HTML into indented symbolic code.

You can learn more at http://haml-lang.com, and you can find alternative implementations on the Wikipedia Page

Code Examples:

Haml:

%div Hello World

%em This is important!

Generates HTML:

<div>Hello World</div>

<em>This is important!</em>

Haml: 

%ul
  %li First List Item
  %li
    %strong Second List Item
%em This is after the Unordered List

Generates HTML: 

<ul>
  <li>First List Item</li>
  <li>
    <strong>Second List Item</strong>
  </li>
</ul>
<em>This is after the Unordered List</em>

Haml:

%span#user_name DoctypeTV

%div#header
  %h1 Site Title

Generates HTML:

<span id="username">DoctypeTV</span>

<div id="header">
  <h1>Site Title</h1>
</div>

Haml:

%div#message Hello World

#message Hello World

Generates HTML:

<div id="message>Hello World</div>

<div id="message>Hello World</div>

Haml:

%span.warning Error!

Generates HTML:

<span class="warning">Error!</span>

Haml:

%em.highlight.danger Look at me!

Generates HTML:

<em class="highlight danger">
  Look at me!
</em>

Haml:

#results
  .result Result 1
  .result Result 2

Generates HTML:

<div id='results'>
  <div class='result'>Result 1</div>
  <div class='result'>Result 2</div>
</div>

Haml:

%a.home{:href=>"http://doctype.tv"}
  Doctype!

Generates HTML:

<a href="http://doctype.tv" class="home">
  Doctype!
</a>

Haml:

#doctypetv is our hashtag

\#doctypetv is our hashtag

Generates HTML:

<div id="doctypetv">is our hashtag</div>

#doctypetv is our hashtag

Haml:

#answer= 2+2

#answer
  The answer is 
  = 2 + 2

Generates HTML:

<div id="answer">4</div>

<div id="answer">
  The answer is 4
</div>

Haml:

- result = 4 * 7
#answer
  The result is
  = result

Generates HTML:

<div id="answer">
  The result is 28
</div>

Haml:

- if 2 < 10
  .hooray Math Works!
- else
  .uhoh Math is broken.

Generates HTML:

<div class="hooray">Math Works!</div>

Download