示例

.rounded-corners(@radius:5px){-webkit-border-radius:@radius;-moz-border-radius:@radius;-ms-border-radius:@radius;-o-border-radius:@radius;border-radius:@radius;}#header{.rounded-corners;}#footer{.rounded-corners(10px);}


说明

.rounded-corners表示函数名(@radius:5px)表示函数的参数{-webkit-border-radius:@radius;-moz-border-radius:@radius;-ms-border-radius:@radius;-o-border-radius:@radius;border-radius:@radius;}表示函数体也就是内容#header{.rounded-corners;}表示调用函数使用默认参数5px#footer{.rounded-corners(10px);}表示调用函数并给函数传递参数


语法

函数名(参数){函数体}


生成的css文件(example2.css)

#header{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;}#footer{-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;}


在html中使用css(less2.html)

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>less2</title><linkrel="stylesheet"href="example2.css"><style>div{width:100px;height:100px;border:1pxsolid#ccc;}</style></head><body><divid="header"></div><divid="footer"></div></body></html>