Haml :是一种标记语言，它使html代码变的更加简练。
haml：
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
html：
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%= current_user.address %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
Sass是CSS3的扩展，它让css变得更加有趣
Sass 与Haml是一对活宝。Haml优化了html，Sass则是优化了css。
Sass在css的基础上添加了四种不同的元素，让css写起来更加方便，看起来更加整洁。
Variable
想在不同的地方使用相同的颜色？需要对文本长度计算高度和宽度？Sass支持使用变量和一些基本的计算以及许多有用的功能。
scss：
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
sass：
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
产生的css：
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Nesting
Sass避免重复的写选择器。相同的效果可以用以下的写法。
scss：
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
sass：
table.hl
margin: 2em 0
td.ln
text-align: right
li
font:
family: serif
weight: bold
size: 1.2em
产生的css：
/* CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
Mixins
比变量更加有用，mixin允许你重复使用大片的CSS，属性以及选择器。你甚至可以给它们传递参数。（类似函数方法）
Scss：
@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;
}
Sass：
@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
产生的CSS:
/* CSS */
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
Selector Inheritance
Sass可以让一个选择器 继承 另一个选择器 除了重复属性外的其他所有的CSS属性（有点绕，就是相当于优先级比较高）。
Scss：
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
Sass：
.error
border: 1px #f00
background: #fdd
.error.intrusion
font-size: 1.3em
font-weight: bold
.badError
@extend .error
border-width: 3px
产生css：
/* CSS */
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
更多文章：
Why use HAML (and SASS)? I already know HTML.
Haml And Sass in 15 muntinues （ppt）
