less使用總結

15年自學了 less ，可是一直沒用，就忘記了。後來抱著提高 css 開發速度的目的，又去學習了 less ，學完馬上用，效果立竿見影，記得也牢了。剛開始學習前，我們總會問自己乙個問題，學習它有什麼用。就拿這個 less 來說，學習它有什麼用，分明就有了 css 用來編寫樣式，我還要花時間來研究 less ，而且學完了還不一定能用上，忘得也快，這不是浪費我時間嗎。其實，存在即有用，至於對你的用處有多大，需要自己使用過後方才知道。

好了，說說我自己在使用 less 過程中的心得。

一、要使用 less 需要乙個 less 編譯的工具：

2. koala 的介紹：

開啟 koala 軟體，如上圖，點選"+"可以選擇資料夾，選擇的資料夾裡需要預先準備乙個 less 檔案，且僅僅只需要準備 less 檔案，當新增了這個資料夾後，koala 會根據 less 檔案的名稱在同一目錄下自動新增乙個 css 檔案。

可以選擇語言：

點選工具圖示，可以選擇語言，這裡以簡體中文為例。

二、less 的使用準備

在 html 中引入的依然是 css 檔案，只不過我們一旦選用 less 編寫樣式了，以後維護就是維護 less 檔案。

三、編寫 less

1. 注釋：

less 的注釋有兩種方法，"/**/" 和 "//"，前一種會在 css 檔案中顯示，後一種不會在 css 顯示。

從兩幅圖的對比可以看出，less 中 "/**/" 方式新增的注釋在 css 中也顯示了，而 "//" 方式新增的注釋在css 中沒有顯示

2. 變數

上圖中定義了三個變數， text-color, main-color, fs

上圖中使用了其中乙個變數 text-color，

定義變數的方法："@"加上變數名。

定義變數的好處：當需要更改樣式中多處的值時，只需要更改變數的值，提高效率。

3. 運算

如上圖，有加法和除法運算，通過前面定義變數 fs ，這裡使用它並在其基礎上加上 4，所以它的 font-size 值就變成了 20px(16px + 4)。

使用運算的好處：避免人工重複計算！

比如：想要讓單行文字豎直居中顯示，需要設定高和行高相同。但是如果設定了 box-sizing: border-box; border-bottom-width: 1px; 的話，就需要讓行高的值比高的值小 1px。這種情況下，就可以設定變數再結合運算讓複雜的工作變得簡單。

@height: 30px;
height: @height;
line-height: @height - 1;

如果想要更改高度的值，只需要更改變數 height 的值就行了。而不需要更改 height 和 line-height 兩個屬性的值，提高效率。

4. 繼承

在上面的諸多例子中，都有"&"符號，這個符號起到繼承的作用。這個符號就是它的父級標籤(類，id等等)用幾個例子說明：

.industry-section & li }    
}

相當於：

.industry-section .industry-section > div:not(.heading) .industry-section > div:not(.heading) h3 .industry-section > div:not(.heading) li

再例如：

& > a &:last-of-type }
}

相當於：

a > span a > span:first-of-type a > span:last-of-type

5. 混合

混合可以將乙個定義好的class a輕鬆的引入到另乙個class b中，從而簡單實現class b繼承class a中的所有屬性。我們還可以帶引數地呼叫，就像使用函式一樣。

例如：

class a
.page-width

class b
body

編譯後的css:

body

更新6. 在 less 中依然可以使用**查詢(工作中用到，更新於20170421)：

less 中使用**查詢

position:absolute;top:70px;left:50%;font-size:0;width:1200px;transform:translatex(-50%);@media (max-width:1600px) }

}}編譯後 css

width:1000px;

}}@media 作用的範圍是什麼，這些樣式就會在 @media 中被限制。

less使用總結

less使用小總結

Less 使用經驗總結

學習總結 LESS的使用

less使用總結

less使用小總結

Less 使用 經驗總結

學習總結 LESS的使用

相關推薦

Less 使用經驗總結