less的中文官網：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/
css前處理器有：less、sass、stylus

less

less是一種動態樣式語言，屬於css前處理器的範疇，它擴充套件了 CSS 語言，增加了變數、Mixin、函式等特性，使 CSS 更易維護和擴充套件。

• 使用原生css編寫樣式時，沒有巢狀的話，邏輯關係不明確，如果程式碼很多，要想改動程式碼就顯得較為困難
• 使用less編寫程式碼變得更加高效

LESS 既可以在 客戶端 上執行 ，也可以藉助Node.js在服務端執行。

<style type="text/css">
#parent{
  width: 300px;
  height: 300px;
  background-color: orange;
  margin: 40px auto;
}
#parent #son{
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 20px auto;
}
<style>
 

Less編譯的幾種方式

.less檔案不能直接在瀏覽器上執行，需要編譯成css檔案，才能被瀏覽器解析

方式1：使用less.js編譯

①頁面使用style標籤或者link標籤引入less，標籤屬性type中的值為text/less

<link rel="stylesheet" type="text/less" href="1.less">

②在style標籤 或者link標籤 後 引入less.min.js

<script src="less.min.js"></script>

• 注意：less.min.js會對樣式型別為text/less進行解析。
• 這種方式不好，不是進行預處理。①需要額外引入less.js ② 使用的是執行時編譯，使用js來將less程式碼轉換成css，解析需要時間。

方式2：koala工具編譯

koala 官網:www.koala-app.com

• 這種方式需要額外下載軟體

方式3：vscode安裝外掛

安裝easy less外掛可以實時對.less檔案進行編譯

less中的註釋

以//開頭的註釋，不會被編譯到css檔案中
以/**/包裹的註釋會被編譯到css檔案中

less中的變數

作用：可以進行復用。

使用@來宣告一個變數，語法：@變數名:值;。例如：@color：pink;

• 作為普通屬性值只來使用：直接使用@變數名
• 作為選擇器和屬性名：@{變數名}
• 變數的延遲載入
  • less中的變數有塊級作用域，只有當塊級作用域中變數提升賦值後才會進行屬性值賦值操作

@color:yellow;
@selector:#parent;
@w:width;
@fontSize:10px;

/*選擇器*/
@{selector}{
  /* 屬性名 */
	@{w}: 400px;
  
  /*變數延遲載入*/
  font-size: @fontSize;
	@value:20px;
  
	height: 300px;
  /* 普通變數 */
	background-color: @color;
	margin: 40px auto;
}

less中的巢狀規則

1.基本巢狀規則
2.&的使用

#parent{
	width: 400px;
	height: 300px;
	background-color: pink;
	margin: 40px auto;
	#son{
		width: 200px;
		height: 200px;
		background-color: yellow;
		margin: 20px auto;
    
    /*
    	&相當於對巢狀父級的引用。
    	如果有&，則會解析成"#parent #son:hover"
    	如果沒有&,則會解析成"#parent #son :hover"
    */
		&:hover{
			background-color: aqua;
		}
	}
}

less中的混合

混合就是將一系列屬性從一個規則集引入到另一個規則集的方式。簡單理解就是，封裝一個函式，然後在需要使用的地方進行呼叫，會把內容完全拷貝
1.普通混合
2.不帶輸出的混合
3.帶引數的混合
4.帶引數並且有預設值的混合
5.帶多個引數的混合
6.命名引數
7.匹配模式
8.arguments變數

普通混合

• 混合的定義可以是.或者#開頭

//下面混合的定義會編譯到css檔案中---帶輸出的混合
//.style0{
// 不想編譯到css檔案中,則新增括號 --不帶輸出的混合
.style0(){
	width: 100px;
	height: 100px;
	background-color: red;
}
#son{
  .style0;
  margin: 20px auto;
}

帶引數的混合

// 可以為引數賦預設值
.style1(@w,@h,@c:orange){
	width: @w;
	height: @h;
	background-color: @c;
}

#son{
  .style1(50px,50px,green);
	margin: 20px auto;
}

命名引數的混合

在呼叫時指定要傳入的形參

.style2(@w:100px,@h:100px,@c:green){
	width: @w;
	height: @h;
	background-color: @c;
}
#son{
  .style2(@c:yellow);
	margin: 20px auto;
}

匹配模式

個人理解就是：將公共的樣式和獨立的樣式抽離，less編譯時會將所有的樣式整合在一起

需求：為#son元素的不同邊框設定不同的顏色

HTML結構

<div id="parent">
  <div id="son">son</div>
</div>

style.less

.styleBorderColor(@position,@color){
	border-width: 10px;
	border-style: solid;
	border-color: transparent;
}
.styleBorderColor(top,@color){
	border-top-color: @color;
}
.styleBorderColor(right,@color){
	border-right-color: @color;
}
.styleBorderColor(bottom,@color){
	border-bottom-color: @color;
}
.styleBorderColor(left,@color){
	border-left-color: @color;
}

index.less

@import './style.less'

#son1{
  width: 100px;
  height: 100px;
  background-color: yellow;
  .styleBorderColor(bottom,purple)
}

arguments

.style5(@width,@style,@color){
  border:@arguments;
}

#son{
  .style5(10px,solid,green);
}

less運算

在less中可以進行加減乘除的運算

@fontSize: 20;

h1{
	font-size: @fontSize+10px;
}

less避免編譯

在less編寫任何內容，less都會幫我們進行編譯，如果不想要less幫忙編譯的話則使用~"不想編譯的內容"這種形式。比如calc是瀏覽器可以自行運算的，我們想要瀏覽器幫忙計算即可

@w: 20;
#parent{
	width: ~"calc(100px*2)";
}

less繼承

特點：

• 效能比混合高
• 靈活度比混合低

注意：繼承 不支援 引數

HTML

<div id="parent">
  <div id="son1">son1</div>
  <div id="son2">son2</div>
</div>

混合方式

.style_son(@color){
	width: 100px;
	height: 100px;
	background-color: @color;
}

#parent{
	width: 300px;
	height: 300px;
	background-color: aqua;
	margin: 30px auto;
	#son:nth-child(1){
		.style_son(orange);
	}
	#son:nth-child(2){
		.style_son(pink);
	}
}

繼承方式

// 注意不能接收引數
.style_son{
	width: 200px;
	height: 200px;
}
.style_son:hover{
  background-color:yellow !important;
}

#parent{
	width: 300px;
	height: 300px;
	background-color: aqua;
	margin: 30px auto;
  
  // 下面會等價於 .style_son,#parent .son然後應用.style_son的規則
	//.son:extend(.style_son){
	.son{
    // 等價於上面
	 	//&:extend(.style_son);
    // 獲取.style_son的所有狀態 即包括 hover
		&:extend(.style_son all);
    &:nth-child(1){
			background-color: orange;
		}
		&:nth-child(2){
			background-color: red;
		}
	}
}