什麼是less?

什麼是less?

簡單的說，你能夠在你的css文件中使用變量、函數等方式來編寫你的css。

less具備哪些功能？

• 混入(Mixins)——class中的class；
• 參數混入——能夠傳遞參數的class，就像函數同樣；
• 嵌套規則——Class中嵌套class，從而減小重複的代碼；
• 運算——CSS中用上數學；
• 顏色功能——能夠編輯顏色；
• 名字空間(namespace)——分組樣式，從而能夠被調用；
• 做用域——局部修改樣式；
• JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

怎樣在你的項目中使用less?

1.首先下載less.js。
2.建立你的less文件，如index.less。
3.在你的中引入上面2個文件

rel="stylesheet/less" type="text/css" href="css/index.less"/>

這裏要注意2點：一是link標籤的rel屬性必須是’stylesheet/less’，二是less.js必須在index.less以後引入。
如今你就能夠正式體驗less了。

1.嵌套

像嵌套html同樣嵌套書寫css

.wrap{background:@gray;padding:30px;h1{font:18px/2 ‘microsoft yahei’}}

2.混入

無須在html上添加多個class，只須要在css中就能夠作到

.box2{.wrap}

3.參數混入

像js函數同樣能夠傳遞參數，無需重複書寫css

1.好比須要css3的圓角效果首先定義一個類,圓角值做爲參數傳入,並設置5px的默認值:
.border(@a:5px){-webkit-border-radius:@a;-moz-border-radius:@a;border-radius:@a;}

2.使用：.box3{.border(20px)}

4.選擇器繼承

感受這個功能跟混入有點相似，沒多大用

5.運算

這個比較實用，使用數字或變量進行運算

@base_margin: 10px;

@double_margin: @base_margin * 2;

使用：.box5{.border(10px);border:@base_width / 2 solid #ccc}

6.color函數

lighten函數:經過百分比來減輕顏色;less還提供其餘變暗或者調整顏色飽和度函數

lighten(@gray, 10%)，實際上只顯示 @gray 90%的顏色