1、html部分
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet/less" type="text/css" href="less/test.less" /> <script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script> <script></script> </head> <body> <div id="header" style="border:1px solid red;">XXXXXXXXXXXXXXXXX<p>aaaaa</p></div> <h2 style="border:1px solid blue;">111111</h2> </body> </html>
2、less/test.less文件内容
@color:#4D926F; .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } #header { color:@color; .rounded-corners(10px); } h2 { color:@color; .rounded-corners; } #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
3、显示效果图
备注：要挂在在服务器上才能看到效果。
原文：http://www.cnblogs.com/wanliyuan/p/5252985.html