Less是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“style.less”，他也能正常工作。
编译less
1.使用js
<link rel="stylesheet/less" type="text/css" href="css/style.less" >
<script type="text/javascript" src="js/less-1.3.3.min.js" data-env="development" ></script >//网上可下载
2.Koala编译工具
koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行
官网地址http://koala-app.com/index-zh.html
3.使用第三方工具gulp grunt等
less语法
变量//less
@color:#333;
header{
color:@color;
}
/*css*/
header{
color:#333333;
}
混合--在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性
//less
.bd50{
border-radius: 50%;
}
.yuan{
width:100px;
height:100px;
background:red;
.bd50
}
/*css*/
.yuan{
width:100px;
height:100px;
background:red;
border-radius: 50%;
}
//html代码
<div class="yuan"></div>
效果
带参数混合--像函数一样定义一个带参数的属性集合，然后在另一个class中去调用这些属性。
//less
/*classA：设置圆角角度为50px*/
.radius(@radius: 50px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
/*classB：设置阴影颜色大小*/
.boxShadow(@boxShadowColor:0 0 10px rgba(0, 204, 204, .5)){
-webkit-box-shadow:@boxShadowColor;
-moz-box-shadow:@boxShadowColor;
box-shadow:@boxShadowColor;
}
/*classC：调用A、B*/
.tableBorder{
border : 5px solid 5px solid #ffff00;
background: #ffc0cb;
width: 200px;
height: 200px;
padding: 0;
margin:0;
text-align: center;
line-height: 200px;
.boxShadow;
/*在classC中调用classA、B 带值带括号 括号内给值，执行括号内的数据*/
.radius();
}
/*css*/
.tableBorder {
border: 5px solid #ffff00;
background: #ffc0cb;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
text-align: center;
line-height: 200px;
-webkit-box-shadow: 0 0 10px rgba(0, 204, 204, 0.5);
-moz-box-shadow: 0 0 10px rgba(0, 204, 204, 0.5);
box-shadow: 0 0 10px rgba(0, 204, 204, 0.5);
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
//html代码
<div class="tableBorder">我是一个带参数混合的正方形</div>
效果
@arguments变量--@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:
//less
.arguments{
width: @width200;
height: @width200;
margin: 30px;
.box-Shadow();
}
.box-Shadow(@x:0,@y:0,@blur:1px,@color: rgba(215, 22, 185, .5)){
//包含传进来的所有参数
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
/*css*/
.arguments {
width: 200px;
height: 200px;
margin: 30px;
box-shadow: 0 0 1px rgba(215, 22, 185, 0.5);
-moz-box-shadow: 0 0 1px rgba(215, 22, 185, 0.5);
-webkit-box-shadow: 0 0 1px rgba(215, 22, 185, 0.5);
}
//html代码
<div class="arguments">arguments变量</div>
嵌套--可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
//less
.list{
width: 100%;
padding: 0;
margin: 30px auto;
list-style: none;
li{
height: 30px;
line-height: 30px;
margin-bottom: 5px;
background: pink;
padding: 0 10px;
//这样写也可以 但是要进行更深层次的匹配 影响效率
/*a{
color: #666;
text-decoration: none;
padding-left: 20px;
}*/
}
a{
color: #666;
text-decoration: none;
//&：代表他的上一层选择器
&:hover{
color: #3a87ad;;
text-decoration: underline;
}
}
span{
float: right;
}
}
/*css*/
.list {
width: 100%;
padding: 0;
margin: 30px auto;
list-style: none;
}
.list li {
height: 30px;
line-height: 30px;
margin-bottom: 5px;
background: pink;
padding: 0 10px;
}
.list a {
color: #5bc0de;
text-decoration: none;
}
.list a:hover {
color: #3a87ad;;
text-decoration: underline;
}
.list span {
float: right;
}
//html代码
<div class="qiantao">
<ul class="list">
<li><a href="#">这是一个测试嵌套的代码</a><span>2012-04-02</span></li>
<li><a href="#">这是二个测试嵌套的代码</a><span>2012-04-02</span></li>
<li><a href="#">这是三个测试嵌套的代码</a><span>2012-04-02</span></li>
</ul>
</div>
匹配模式--有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：
//less
//朝上
//宽度默认5，颜色默认灰色
.triangle(top,@w:100px,@c:#ccc){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
//朝下
.triangle(bottom,@w:100px,@c:#ccc){
border-width: @w;
border-color:@c transparent transparent transparent;
border-style:solid dashed dashed dashed;
}
//朝左
.triangle(left,@w:100px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent ;
border-style: dashed solid dashed dashed ;
}
//朝右
.triangle(right,@w:100px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c ;
border-style: dashed dashed dashed solid;
}
//特殊匹配模式 不管匹配谁都会执行@_的内容
.triangle(@_,@w:100px,@c:#ccc){
width: 0px;
height: 0px;
overflow: hidden;
}
.sanjiao{
.triangle(left);
}
/*css*/
//由于调用的“left”，所以只会编译left的样式
.sanjiao {
border-width: 100px;
border-color: transparent #cccccc transparent transparent;
border-style: dashed solid dashed dashed ;
width: 0px;
height: 0px;
overflow: hidden;
}
//html代码
<div class="sanjiao"></div>