Less is more

ReeQi@2011-10 is more !?

支持JS解析、后端语言解析（PHP、node.js）,[object Object]

How to use {less} ,[object Object],http://incident57.com/less/

How to use {less} ,[object Object],http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe

How to use {less} ,[object Object],http://www.vertstudios.com/blog/less-app-windows-sorta/

How to use {less} ,[object Object],http://winless.org/

{less} syntax ,[object Object]

Functions & Operations —运算,[object Object]

{less} syntax ,[object Object],.roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .mod{ .roundedCorners(10px); } .mod2{ .roundedCorners; } .mod{ -moz-border-radius: 10px; -webkit-border-radius:10px; border-radius: 10px; } .mod2{ -moz-border-radius: 5px; -webkit-border-radius:5px; border-radius: 5px; }

{less} syntax ,[object Object],.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } .mod{ .boxShadow(2px,2px,3px,#f36); } .mod{ -moz-box-shadow: 2px,2px,3px,#f36; -webkit-box-shadow: 2px,2px,3px,#f36; box-shadow: 2px,2px,3px,#f36; }

{less} syntax ,[object Object],.wrap{ width : 985px; margin : 0 auto; .side{ float : left; width : 185px; } .content{ float : left; width : 785px; margin-left : 15px; } } .wrap{ width : 985px; margin : 0 auto; } .wrap .side{ float : left; width : 185px; } .wrap .content{ float : left; width : 785px; margin-left : 15px; }

{less} syntax ,[object Object],.wrap{ …… &:after{ …… } } .wrap{……} .wrap:after{ …. } .wrap{ a{ &:hover{….} &:after{…..} &.current{…..} span {….} } } .wrap a:hover {….} .wrap a:after {….} .wrap a.current {….} .wrap a span{….}

{less} syntax ,[object Object],.mod1 .mod1_hd { color : #fff; font-size:14px; } .mod2 .mod2_hd { border:#000 solid 1px; color : #fff; font-size:14px; } .mod1{ .mod1_hd{ color : #fff; font-size:14px; } } .mod { .mod2_hd{ border:#000 solid 1px; .mod1 > .mod1_hd; } }

{less} syntax ,[object Object],.wrap header { color: white; } footer { color : red; } @var: red; .wrap{ @var: white; header { color: @var; } } footer { color: @var;}

{less} syntax ,[object Object],@base_column_width: 40px; .side{ float:left; width: ( @base_column_width * 5 ) - 15; margin-right:15px; } .content{ float:left; width: ( @base_column_width * 20 ) - 15; } .side { float:left; width: 185px; margin-right:15px; } .content { float:left; width: 785px; }

Less is more

Recommended

Recommended

More Related Content

Similar to Less is more

Similar to Less is more (20)

Less is more