SASS是一个好东西

阅读更多

HAML 1.5以后的新特性要数 sass最为吸引人了。昨天试用了一下，确实让css文件简洁了不少。支持常量和缩进嵌套。比如说scaffold生成的CSS：

.errorExplanation {
    margin-bottom: 20px;
    font-size: 10px;
}
.errorExplanation h3, .errorExplanation h2 {
    background: #e33;
    padding: 3px;
    margin-bottom: 0;
    font-size: 14px;
    color: #fff;
}
.errorExplanation ul {
    background: white;
    list-style: square;
    border-bottom: 2px solid #e33;
    margin: 0 0 5px 0;
    padding: 5px 0 5px 20px;

}
.errorExplanation li {
    font: 12px 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    margin:0;
    margin-left: 0;
    padding: 0;
}

改写成sass后变成了：

!error_background = #e33

.errorExplanation
  :margin-bottom 20px
  :font-size 10px

  h3, h2
    :background = !error_background
    :padding 3px
    :margin-bottom 0
    :font-size 14px
    :color !white

  ul
    :background white
    :list-style square
    :border-bottom 2px solid !error_background
    :margin 0 0 5px 0
    :padding 5px 0 5px 20px

  li
    :font 12px 'Lucida Grande', Geneva, Verdana, Arial, Helvetica, sans-serif
    :color #000
    :margin 0
    :margin-left 0
    :padding 0