html 中的代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet/less" type="text/css" href="css/style.less"/> <script src="js/less.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div>0</div> <ul> <li class="special">1</li> <li>2</li> <li class="special"><a class="a">3</a></li> <li>4</li> <li>5</li> </ul> </body> </html>
css中Less文件内容
@background-color:#f66;
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
.border-shadow(@x,@y,@z,@color){
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
@base-color: #111;
@red: #842210;
.border{
border: 20px solid #ddd;
text-align: center;
margin-top: 3px;
.border-radius(5px);
.border-shadow(3px,3px,5px,#000);
// color: @base-color + #003300;
// 饱和度降低 10%
// border-color: desaturate(@red, 10%);
}
div{
120px;
height: 120px;
background: @background-color;
.border;
}
ul>li{
50px;
height: 20px;
background: @background-color;
.border;
&.special{
font-size: 40px;
.a{
color: red;
}
}
}
js中的less.min.js可以自行到网上下载，最新版本的即可。