[url=http://haml.hamptoncatlin.com/]HAML[/url] 1.5以后的新特性要数[url=http://haml.hamptoncatlin.com/docs/sass]sass[/url]最为吸引人了。昨天试用了一下,确实让css文件简洁了不少。支持常量和缩进嵌套。比如说scaffold生成的CSS:
[code]
.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;
}
[/code]
改写成sass后变成了:
[code]
!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
[/code]
[code]
.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;
}
[/code]
改写成sass后变成了:
[code]
!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
[/code]