示例

@the-border:1px;@base-color:#111;@red:#842210;#header{color:(@base-color*3);border-left:(@the-border*10);border-right:(@the-border*2);}#footer{color:(@base-color+#003300);border-color:desaturate(@red,10%);}


在html文件中直接使用(less5.html)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>less4</title><linkrel="stylesheet/less"href="example5.less"><scriptsrc="less-1.7.3.min.js"></script><style>#header,#footer{width:500px;height:400px;}#header{border-style:solid;}#footer{border-style:solid;border-width:1px;}</style></head><body><divid="header">需要特别注意的是,由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是器下使用</div><divid="footer">footer</div></body></html>