项目规范之CSS篇2.ppt

LESS 输出: .zd-list { color: #9e9e9e; border-top: 1px solid #ccc; border-bottom: 1px dashed #aaa; } LESS 带参数混合 在 LESS 中，你还可以像函数一样定义一个带参数的属性集合。 .border-radius (@radius) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } 然后在其他 class 中像这样调用它： .zd-label{ border:1px solid #ccc; .border-radius(4px); } LESS 输出: .zd-label { border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } LESS 我们还可以像这样给参数设置默认值： .border-radius (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } 所以现在如果我们像这样调用它的话： .zd-label{ border:1px solid #ccc; .border-radius; } LESS 输出: .zd-label { border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } LESS 多参数混合 多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。 .box(@color){ color: @color; } .box(@color; @padding: 2px){ border-color: @color; padding: @padding; } .box(@color; @padding; @margin: 3px){ border-color: @color; padding: @padding; margin: @margin; } LESS 输入: .zd-box{ .box(#ff8000); } 输出： .zd-box { color: #ff8000; border-color: #ff8000; padding: 2px; } LESS @arguments变量 多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。 .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } 输入： .zd-box{ .box-shadow(2px, 5px); } LESS 输出： .zd-box { box-shadow: 2px 5px 1px #000000; -moz-box-shadow: 2px 5px 1px #000000; -webkit-box-shadow: 2px 5px 1px #000000; } LESS !important关键字 调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important： .color (@color: #eee) { color:@color; } .zd-color-a{ .color; } .zd-color-b{ .color !important; } LESS 输出： .zd-color-a { color: #eeeeee; } .zd-color-b { color: #eeeeee !important; } LESS 3.嵌套规则(Nested rules) LESS 可以让我们以嵌套的方式编写层叠样式。让我们先看下下面这段 CSS： .nav{ color: #333; background