Less使用教程（容易入门）

Less语法详解

1.注释

//单行注释
/*
多行注释
多行注释
多行注释
*/

2.变量

@color: red;
@size: 14px;

.container{
	background: @color;
	font-size: @size;
}

编译后的css代码
.container {
	background: red;
	font-size: 14px;
}

3.混合

第一种：将.border的样式直接引入.container，直接引用即可。

.container{
	width: 100px;
	height: 100px;
	background: red;
	.border;
}
.border{
	border: 1px solid black;
}

编译后的CSS代码
.container {
	width: 100px;
	height: 100px;
	background: red;
	border: 1px solid black;
}
.border {
	border: 1px solid black;
}

第二种：将.border(参数）引进.container

.container{
	width: 100px;
	height: 100px;
	background: red;
	.border(2px);
}
.border(@borderWidth){
	border: solid black @borderWidth;
}

编译后的CSS代码
.container {
	width: 100px;
	height: 100px;
	background: red;
	border: 1px solid black;
}
.border {
	border :solid black 2px;
}

第三种：基于第二种，将参数给定默认参数
.border(默认参数)传入.container
不给参数就按照默认参数，给参数就按照给定参数。

.container{
	width: 100px;
	height: 100px;
	background: red;
	.border();
}
.border(@borderWidth: 10px;){
	border: solid black @borderWidth;
}

编译后的CSS代码
.container {
	width: 100px;
	height: 100px;
	background: red;
	border: 1px solid black;
}
.border {
	border :solid black 10px;
}

4.匹配模式

可以理解成JS当中if-else、switch语句
假设项目需要多处用到一些小图标，这里以三角形来举例：

//朝上的三角形
.triangle(top,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: transparent transparent @color transparent;
	border-style: dashed dashed solid dashed;
} 
//朝下的三角形
.triangle(bottom,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: @color transparent transparent transparent;
	border-style: solid dashed dashed dashed;
} 
//朝左的三角形
.triangle(top,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: transparent @color transparent transparent;
	border-style: dashed solid dashed dashed;
} 
//朝右的三角形
.triangle(top,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: transparent transparent transparent @color ;
	border-style: dashed dashed dashed solid;
} 
//只要是用到.triangle,都会携带以下这些CSS，@_表示携带这些公共样式
.triangle(@_,@width: 50px,@color: #ccc){
	height: 0;
	width: 0;
	overflow: hidden;
}

//开始调用
.sanjiaoxing{
	.triangle(left,100px,red);
}
//相当于画出一个向左的红色三角形

再来一个例子：

.pos(r){
	position: relative;
}
.pos(a){
	position: absolute;
}
.pos(f){
	position: fixed;
}

//应用
.container{
	width: 100px;
	height: 100px;
	.pos(f);
}

//编译后CSS
.container {
  width: 100px;
  height: 100px;
  position: fixed;
}

5.运算

一般运算是用在px和color,color相对少用。

@fontSize：14px;
@color: #ccc;

.container{
	font-size: @fontSize + 10;
	color: @color + 10;
}


     
 //解析成CSS
.container {
	font-size: 24px;
	color: #d6d6d6;
}

6.嵌套规则

先看一段html代码

<ul class="list">
	<li><a href="#">点击</a><span>时间</span></li>
	<li><a href="#">点击</a><span>时间</span></li>
	<li><a href="#">点击</a><span>时间</span></li>
	<li><a href="#">点击</a><span>时间</span></li>
</ul>

用CSS来写样式

//第一种
.list{
	width: 200px;
	height: auto;
}
.list li{
	height: 30px;
	line-height: 30px;
}
.list li a{
	font-size: 14px;
}
.list li a:hover{
	color: red;
}
.list li span{
	font-size: 12px;
}

用less来实现上述同样的CSS样式

.list{
	width: 200px;
	height: auto;
	.li{
		height: 30px;
		line-height: 30px;
	}
	.a{
		font-size: 14px;
		&:hover{
			color: red;
		}
	}
	.span{
		font-size: 12px;
	}
}

当然，也可以这样写。不过写的层级越来，解析会越慢。

//第二种
.list{
	width: 200px;
	height: auto;
	.li{
		height: 30px;
		line-height: 30px;
		.a{
			font-size: 14px;
			&:hover{
				color: red;
			}
		}
		.span{
			font-size: 12px;
		}
	}

还是推荐第一种。
&:指向上一层父选择器

7.@arguments变量

这个特性用的相对较少。
@argument表现传入的所有参数。

.border(@w: 2px,@color: red,@style: solid){
	border: @arguements;
}

.container{
	width: 100px;
	height: 100px;
	.border();
}

//编译成CSS
.container {
	width: 100px;
	height: 100px;
	border: 2px red solid;
}

8.避免编译、!important

有时候会输出一些不正确的CSS语法或者使用一些Less不认识的语法。
我们可以在值的前面加上~，表示不进行编译。
比如滤镜等

.container{
	width: ~'calc(100%-20)';
}
/编译后
.container {
	width: calc(100%-20);
}

!important的使用，直接加在混合最后面即可。

.container{
	width: 100px;
	height: 100px;
	background: red;
	.border(2px) !important;
}
.border(@borderWidth){
	border: solid black @borderWidth;
}

//编译后CSS 
.container {
  width: 100px;
  height: 100px;
  background: red;
  border: solid black 2px !important;
}

编译：less在线编译器