yakjuly's blog

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）