Less的點滴總結

Less is more than css.

LESS 是動態的樣式表語言，通過簡潔明瞭的語法定義，使編寫 CSS 的工作變得非常簡單。

LESS 可以直接在客戶端使用，也可以在服務器端使用。在實際項目開發中，我們更推薦使用第三種方式，通過 LESS 的編譯器，將 LESS 文件編譯生成靜態 CSS 文件，並在 HTML 文檔中應用。

1、變量

<span style="font-size:12px;">@border-color : #b5bcc7; 
.mythemes tableBorder{ 
     border : 1px solid @border-color; 
}</span>

該特性適用於定義主題，我們可以將背景顏色、字體顏色、邊框屬性等常規樣式進行統一定義，這樣不同的主題只需要定義不同的變量文件就可以了。當然該特性也同樣適用於 CSS RESET（重置樣式表），在 Web 開發中，我們往往需要屏蔽瀏覽器默認的樣式行爲而需要重新定義樣式表來覆蓋瀏覽器的默認行爲，這裏可以使用 LESS 的變量特性，這樣就可以在不同的項目間重用樣式表，我們僅需要在不同的項目樣式表中，根據需求重新給變量賦值即可。

<span style="font-size:12px;"> @width : 20px; 
 #homeDiv { 
   @width : 30px; 
   #centerDiv{ 
       width : @width;// 此處應該取最近定義的變量 width 的值 30px 
              } 
 } 
 #leftDiv { 
     width : @width; // 此處應該取最上面定義的變量 width 的值 20px 
 }</span>

2、Mixins（混入）
它是多重繼承的一種實現，在 LESS 中，混入是指在一個 CLASS 中引入另外一個已經定義的 CLASS，就像在當前 CLASS 中增加一個屬性一樣。

Mixins 還有一種形式叫做 Parametric Mixins（混入參數），LESS 也支持這一特性：

// 定義一個樣式選擇器
.borderRadius(@radius){ 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 
 // 使用已定義的樣式選擇器
#header { 
    .borderRadius(10px); // 把 10px 作爲參數傳遞給樣式選擇器
} 
.btn { 
    .borderRadius(3px);// // 把 3px 作爲參數傳遞給樣式選擇器
 }

默認值：

.borderRadius(@radius:5px){ 
    -moz-border-radius: @radius; 
    -webkit-border-radius: @radius; 
    border-radius: @radius; 
} 
.btn { 
    .borderRadius(); 
}

三角：

完整的應該如下所寫：

.sanjiao{
	width:0px;
	height: 0px;
	overflow: hidden;
	border-width: 10px;
	border-color: transparent transparent red transparent;
	border-style: dashed dashed solid dashed;   
}

//匹配

.trangle(top,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent transparent @c transparent;
	border-style: dashed dashed solid dashed;
	
}
.sanjiao{
	.trangle(top,100px,#000);
}

都具備的默認屬性，需要添加如下代碼：

.trangle(@_,top,@w:5px,@c:#ccc){
	width: 0px;
	height: 0px;
	overflow: hidden;
}

常用樣式的書寫與使用：

.pos(f){
	position: fixed;
}
.test{
	……
	.pos(f);
}

運算：

@test_01:300px;
.box_02{
	width: @test_01 - 20*5;
}

 @init: #111111; 
 @transition: @init*2; 
 .switchColor { 
    color: @transition; 
 }

對於顏色的操作的函數列表：

 lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
 darken(@color, 10%); // return a color which is 10% *darker* than @color 
 saturate(@color, 10%); // return a color 10% *more* saturated than @color 
 desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
 fadein(@color, 10%); // return a color 10% *less* transparent than @color 
 fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
 spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
 spin(@color, -10); // return a color with a 10 degree smaller hue than @color

init: #f04615; 
 #body { 
  <span style="white-space:pre">	</span>background-color: fadein(@init, 10%); 
 }

hover的書寫方式：

a { 
    color: red; 
    text-decoration: none; 
    &:hover {// 有 & 時解析的是同一個元素或此元素的僞類，沒有 & 解析是後代元素
        color: black; 
        text-decoration: underline; 
     } 
 }

變量很多，不想一一寫出來怎麼辦，@argument

.border_arg(@w:3px, @color:red, @xx:solid){
	border:@arguments;
}
.test_arguments{
	.border_arg(40px);
}

避免編譯，使用濾鏡（例如filter之類的就可以在前邊加~，還須實際中進行測試）

.test_03{
	width: 300px;
	calc(300px-30px);//瀏覽器計算
	<span style="color: rgb(34, 34, 34); font-family: Arial, sans-serif; line-height: 22.375px; background-color: rgb(249, 249, 249);">~</span> 'calc(300px-30px)';   //避免編譯
}