`
dongbin
  • 浏览: 245595 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

SASS是一个好东西

    博客分类:
  • Ruby
CSS 
阅读更多
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

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics