CSS預處理器-Less

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;
		}
	}
}