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在線編譯器