Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
使用时，需要引入less.js文件，
1.site.less文件，定义了一些样式
@bColor:teal;//定义变量：bColor @oColor:orange; //模式匹配（方法重载）@c参数名：@bColor为默认值 .mixin(dark, @c:@bColor){ //darken自带函数，变暗10% color:darken(@c,10%); } .mixin(light, @c:@bColor){ //lighten自带函数,变亮10% color:lighten(@c,10%); } //声明默认宽度1px .bordered(@width:1px){ //dotted:点线 border:@width dotted @bColor; } //圆角5px .border-radius(@radius:5px){ -moz-border-radius:@radius; -webkit-border-radius:@radius; border-radius:@radius; } //带参混合 .box-shadow(@x:5px,@y:5px,@c:@bColor){ box-shadow:@arguments; .mixin(light,@c); margin-bottom:5px; } //引导模式,混合带入（在一个样式中调用另一个样式） .mixin(@a) when(lightness(@a)>=50%){ background-color:black; } //亮度小于50%将背景色设置为白色 .mixin(@a) when(lightness(@a)<=50%){ background-color:white; } header{ //color指向oColor,而oColor是orange，所以最终的颜色为orange color:@oColor; h1{ color:@bColor; } h2{ color:#f00; a{ color:#0f0;//（同级）本级的hover属性鼠标放在上面变为红色 &:hover{color:#f00;} } } } footer,article,aside,section,hgroup,div,nav{ .mixin(#888); .mixin(light,@bColor); //模式匹配(重载) //调用.border .bordered(2px); //mixin 带参数混合 .border-radius(5px); .box-shadow(); } 2.html代码：
<!DOCTYPE html> <html lang="zh-cn"> <head> <!-- 页面编码 --> <meta charset="UTF-8"> <!-- 响应式布局 --> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- Bootstrap样式文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- 自定义样式文件 --> <link rel="stylesheet/less" type="text/css" href="styles/site.less"> <!-- Jquery脚本文件 --> <script src="scripts/jquery.min.js"></script> <!-- less脚本文件 --> <script src="scripts/less.js"></script> <!-- Bootstrap脚本插件文件 --> <script src="bootstrap/js/bootstrap.min.js"></script> <!-- 标签名称 --> <title>index</title> </head> <body class="container"> <header class="page-header"> this is header <h1>index</h1> <h2> less demo <a href="#">view</a> </h2> </header> <div> <article> <h3>less入门<small>with aptana</small></h3> <section> <p>less是一种动态样式语言</p> <aside> <a href="#">了解更多</a> <blockquote> 来自W3C标准 <cite><a href="http://w3c.com">w3c</a></cite> </blockquote> </aside> </section> </article> <br><br> </div> <footer class="navbar-fixed-bottom text-center">© 2015</footer> </body> </html> 3.效果图：
