教你如何十分鐘入門 Less

我們都知道寫css**是有些枯燥無味的，尤其是面對那些成千上萬行css**的專案。你始終在相同的地方使用相同的規則並且在你的編譯器中搜尋和替換每次顏色的變化。這需要很多的努力和規則來保持你的css可維護，但它本不應該這樣的。

很幸運，**開發社群已經解決了這個問題，現在我們擁有諸如 less, sass 和 stylus 之類的預處理器，它們給我們提供了許多優於純css的好處。

使用預處理器的唯一缺點就是，你需要將**轉換為純css**，讓它能夠在瀏覽器中工作。

如果你已經安裝了node，那麼你應該知道什麼是終端，接下來就開啟乙個終端。安裝less用以下語句：

npm install -g less

安裝完成後，你將可以在任何開啟的視窗中使用lessc命令，這個命令允許你將.less檔案編譯成純css檔案，像下面這樣：

lessc styles.less > styles.css

如果說，我們用less將所有的樣式寫在了style.less中，通過上述命令，我們就可以將**轉換為純css**。接下來你就可以將樣式表引入到html中了，如果在編譯過程**現了錯誤，將會在終端的命令列中提示你。

less的乙個主要功能就是可以讓你像在其它高階語言中一樣宣告變數，這樣你就可以儲存你經常使用的任何型別的值：顏色，尺寸，選擇器，字型名稱和url等。less的哲學是在可能的情況下重用css語法。

這裡，我們宣告了兩個變數，乙個是背景顏色，乙個是文字顏色，它們都是十六進製制的值。

less**如下：

@background-color: #ffffff;
@text-color: #1a237e;pul
li

將其編譯成css**如下：

p

ulli

在上面的例子當中，背景顏色是白色，文字顏色是黑色。比方說，現在我們要切換二者的值，也就是黑色的背景和白色的文字，我們只需要修改兩個變數的值就可以了，而不是手動的去修改每個值。

閱讀更多有關less變數的內容，請看這裡。

less允許我們將已有的class和id的樣式應用到另乙個不同的選擇器上。下面這個例子可以清楚地說明這一點。

#circle #small-circle

#big-circle

將其轉換成css**如下

#circle #small-circle

#big-circle

如果你不想 mixin 也以一種規則的形式出現在css**中，那麼你可以在它的後面加上括號：

#circle()
#small-circle
#big-circle

此時編譯成css:

#small-circle

#big-circle

mixin另乙個比較酷的功能就是它支援傳入引數，下面這個例子就為circle傳入乙個指定寬高的引數，預設是 25px。這將建立乙個 25×25的小圓和乙個 100×100 的大圓。

#circle(@size: 25px)
#small-circle
#big-circle

轉換成css:

#small-circle

#big-circle

巢狀可用於以與頁面的html結構相匹配的方式構造樣式表，同時減少了衝突的機會。下面是乙個無序列表的例子。

ul
}

編譯成css**：

ul

ul li

就像在其它高階語言中一樣，less的變數根據範圍接受它們的值。如果在指定範圍內沒有關於變數值的宣告，less會一直往上查詢，直至找到離它最近的宣告。

回到css中來，我們的li標籤將有白色的文字，如果我們在ul標籤中宣告@text-color規則。

@text-color: #000000;
ul}

編譯生成的css**如下：

ul

ul li

你可以對數值和顏色進行基本的數**算。比如說我們想要兩個緊鄰的div標籤，第二個標籤是第乙個標籤的兩倍寬並且擁有不同的背景色。

@div-width: 100px;
@color: #03a9f4;
div#left
#right

編譯成css如下：

div #left

#right

less中也有函式，這讓它看起來像一門程式語言了，不是嗎？

讓我們來看一下fadeout，乙個降低顏色透明度的函式。

@var: #004590;
div}

編譯成css如下所示：

div

div:hover

通過上述**，當我們將滑鼠懸浮在div上時，就可以獲取半透明度的動畫效果，這比之前自己手動設定要簡單的多了。還有很多有用的函式去操縱顏色，檢測影象的大小，甚至將資源作為data-uri嵌入樣式表，在這裡檢視這些函式的列表。

教你如何十分鐘入門 Less

十分鐘入門less

十分鐘學會less

十分鐘入門express

教你如何十分鐘入門 Less

十分鐘入門less

十分鐘學會less

十分鐘入門express

相關推薦