java operator.less_less函数使用

示例.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)html>

less2

div{

width: 100px;

height: 100px;

border: 1px solid #ccc;

}