Less隨筆

Less是什麼？

1.Less類似於jQuery( css中的jQuery )

LessCss是一種動態樣式語言，屬於css預處理語言的一種，它使用類似CSS的語法，爲CSS的賦予了動態語言的特性，如變量、繼承、運算、函數等，更方便CSS的編寫和維護。

LessCss可以再多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。

本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 CSS 文件.

這裏用 sublime編輯器+koala編譯工具

新建main.less,輸入 @charset"utf-8"; 保存。

將項目文件（這裏命名爲Less,其中包括img與style文件夾），託到koala中，執行編譯。

它將自動生成main.css文件，在sublime中打開，（準備完成）

Less中的註釋：

/*我是被編譯的*/  （顯示在css中）

//我是不被編譯的  （不顯示）

內容：變量、混合、匹配模式、運算 嵌套規則、@arguments變量、避免編譯、！important關鍵字

1.變量

@width:30px;

2.混合

<span style="font-family:Microsoft YaHei;">@test_width:300px; 
.box{
	width:@test_width;
	height:@test_width; 
	background-color:yellow; 	//2.混合	
        .border;
} //混合
.border{
	border:solid 5px pink;
}</span>

3.混合 - 可帶參數的(必填)

<span style="font-family:Microsoft YaHei;">.border_02(@border_width){
	border:solid yellow @border_width;
} 
.test_hunhe{
	.border_02(30px);
}</span>

4.混合 — 默認帶值

<span style="font-family:Microsoft YaHei;">.border_03(@border_width:10px){
	border:solid green @border_width;
}

.test_hunhe_03{
	.border_03(20px);
}</span>

5.匹配模式 (@_ ：無論選誰都必須帶上我 )

<span style="font-family:Microsoft YaHei;">.triangle(top,@w:5px,@c:#ccc){
	border-width: @w;
	border-color:transparent transparent @c transparent;
	border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: @c transparent transparent transparent;
	border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent @c transparent transparent;
	border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent transparent transparent @c;
	border-style: dashed dashed dashed solid;
}
// @_ : 無論上面選誰，都必須帶上我
.triangle(@_,@w: 5px,@c: #ccc){
	width: 0;
	height: 0;
	overflow: hidden;
}
.sanjiao{
	.triangle(right,100px);
}</span>

6.匹配模式的定位

<span style="font-family:Microsoft YaHei;">.pos(r){
	position: relative;
}
.pos(a){
	position: absolute;
}
.pos(f){
	position: fixed;
}

.pipei{
	width: 200px;
	height: 200px;
	background-color:green;
	.pos(r);
}</span>

 7.運算

<span style="font-family:Microsoft YaHei;">@test_01:300px;
.box_02{
	width:@test_01 + 20;
	color:#ccc - 10;
}</span>

8.嵌套規則 （& : 代表上一層選擇器）

<span style="font-family:Microsoft YaHei;">.list{
	width:600px;
	li{
		height:30px;
	}
	a{
		float: left;
		//& 代表上一層選擇器
		&:hover{
			color:red;
		}
	}
	span{
		float:right;
	}
}</span>

9. @arguments變量

<span style="font-family:Microsoft YaHei;">.border-arg(@w:30px,@c:red,@xx:solid){
	border:@arguments; //帶上了所有默認值
} 
.test_arguments{
	.border-arg(40px);   //更改了第一個變量的值
}</span>

10.避免編譯

1. 有時候我們需要輸出一些不正確的css語法或者使用一些LESS不認識的專有語法。
2. 要輸出這樣的值我們可以在字符串前加上一個 ~
例如： width:~''

<span style="font-family:Microsoft YaHei;">.test_03{
	height:calc(300px-30px);    //返回 270px	                                                                                                                                                                                           width:~'calc(300px-30px)';  //返回 300px-30px
}</span>

11. !important關鍵字

.test_important{ .border_03()!important;}

小技巧總結：

@_ : 無論選誰都必須帶上我

& ：代表上一層選擇器

@arguments : 可變參（代表所有）

~‘’： 避免編譯

自己感覺less還是很好用的，方便了css結構的編寫，推薦喲。

想了解更多，訪問http://lesscss.net