less之簡單介紹

less簡單記錄

http://www.lesscss.net/article/home.html

 1、Less前言
      關注less很久了，整理和查看了很多相關的資料，此篇作爲less相關的開篇，簡單記錄一下。
 
 
2、Less是什麼？
 
      --------- 動態樣式語言
 
 其實就是將css變得可以使用動態語言的特性，如變量、繼承、運算、函數。可以向編程一樣去寫css，是不是很酷？
 less可以應用在客戶端也可以應用在服務端（藉助一些如Node.js這樣的工具）
 
3、Less快速適用
 
如果你本地或者像看源碼的話，需要下載一個依賴腳本文件：less.js
下載地址：http://code.google.com/p/lesscss/downloads/list
 
如果你直接連在線的地址可以在html頁面的head標籤裏面增加如下代碼：

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>  

當然我們還需要引入一個我們寫less的文件，以.less爲文件的後綴 
我們就在上面步驟中的<script>標籤的上面增加如下的代碼
 
Html代碼  
     
<!-- 方式和css的導入是一樣的 -->  
<link rel="stylesheet/less" href="style.less" type="text/css" />  
 
注意一下rel的值：stylesheet/less
 
這邊我來貼一些源碼，看看爲什麼必須要按照這樣的規則來：
 
Js代碼  
var links = document.getElementsByTagName('link');  
var typePattern = /^text/(x-)?less$/;  
  
less.sheets = [];  
  
for(var i=0;i<links.length;i++){  
    if(links[i].rel === 'stylesheet/less' || (links[i].rel.match(/stylesheet/)  
         && (links[i].type.match(typePattern)))  ){  
          less.sheets.push(links[i]);  
    }  
}  
 
 
變量：
 允許我們定義一些比較通用的樣式規則

Css代碼  
/*less code*/  
@width:960px;  
.header{  
    width:@width;  
}  
.footer{  
    width:@width;  
}  
  
  
/*css code*/  
.header{  
    width:960px;  
}  
.footer{  
    width:960px;  
}  
 
    其實我們可以發現：less中的變量只能被定義一次，前面定義的會被後面覆蓋。


css代碼  
/*我同時定義@h*/  
@h:30px;  
@h:100px;  
.header{  
    height:@h;  
}  
  
  
/*輸出的css*/  
.header{  
   height:100px;  
}  
 
    同時在less中，也有類似於php語言中變量的變量的概念。
 
    
Css代碼  
//當然變量能夠參與計算  
@base-h:50px;  
@height1:@base-h+100px;  
@height2:@base-h+200px;  
  
.header{  
    height:@height2;  
}  
  
/*轉換的css*/  
.header{  
    height:250px;  
}  
  
  
  
//或者可以這樣寫---但是好像不能做計算  
@base-h:50px;  
@height1:"base-h";  
.header{  
    height:@@height1;  //注意是兩個@@  
}  
     
混入(Mixin)
     ------ 參數可以定義默認值，也可以不定義


Css代碼  
/*可以帶參數*/  
.radius(@radius:3px){  
     border-radius:@radius;  
     -webkit-border-radius:@radius;  
     -moz-border-radius:@radius;  
}  
  
.header{  
    .radius;  
}  
.footer{  
    .radius(5px);  
}  
  
  
/*轉成的css*/  
.header{  
     border-radius:3px  
     -webkit-border-radius:3px;  
     -moz-border-radius:3px;  
}  
.footer{  
     border-radius:5px  
     -webkit-border-radius:5px;  
     -moz-border-radius:5px;  
}  
 
     這裏面還有一個（類似於數組的）@arguments 變量


Css代碼  
     
.box-shadow(@x:2px,@y:2px,@blur:1px,@color:#000){  
    box-shadow:@arguments;  
    -moz-box-shadow:@arguments;  
    -webkit-box-shadow:@arguments;  
}    
  
.header{  
    .box-shadow(4px;3px;1px;#fefefe);  
}  
  
  
/*轉換後的*/  
.header{  
    box-shadow:4px;3px;1px;#fefefe;  
    -moz-box-shadow:4px;3px;1px;#fefefe;  
    -webkit-box-shadow:4px;3px;1px;#fefefe;  
}