SASS是一个好东西

[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]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值