Less編程化CSS學習

前段時間裡，抽空學習了Less，一種動態樣式語言，感覺真的很強大。

如何在用戶端使用：

1.引入你的樣式檔案，並把rel屬性設定為stylesheet/less 。

2.引入你下載的less.js檔案，在head中。

註：1.樣式檔案，一定要在less.js檔案之前。2.需要在伺服器環境下使用。

使用方式：

1.變數的使用方式。

　　變數允許我們單獨定義一系列通用的樣式，然後再需要的時候調用。

@the-border:2px solid #ccc;.de{border: @the-border;}

2.函數的方式。

　　我們可以像使用函數一樣的傳參數給它，並調用它。

.box-shadow(@shadow){    box-shadow: @shadow;}.de{width: 450px; height: 450px; .box-shadow(#936 0 0 10px);}

3.嵌套的方式。

　　我們可以在一個選取器中，嵌套另一個選取器來實現繼承。

.de{        p{        color:#936;    }}

4.函數與運算的方式。

　　程式設計中的加減乘除。

@the-border:1px;@the-color:#111;.de{color: @the-color * 3;}