十分鐘入門 Less

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

 

　　很幸運，網站開發社群已經解決了這個問題，現在我們擁有諸如 Less, Sass 和 Stylus 之類的前處理器，它們給我們提供了許多優於純 CSS 的好處。

• 變數 - 它可以讓你更輕鬆的在整個樣式表中定義和更改值（這個功能 CSS 在未來某一天也有可能會實現）。

• 動態計算值 - CSS 中最近出了一個 cal()， 但它只適合用於長度的計算。

• Mixins - 可以讓你重用或者組合樣式，而且支援傳遞引數。

• 函式 - 它為你提供了一些方便的程式去操縱顏色，轉換影象等。

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

　　1. Getting Started

　　Less 是用 JavaScript 寫的，所以需要額外的 Node.js 或者網頁瀏覽器才能夠執行它。你可以在你的網站中引入 less.js ，這樣在真正的執行環境下它就可以自動編譯，但這個過程非常緩慢，所以不建議這麼使用。 推薦的方式是提前編譯成 CSS 程式碼並且將一個正常的發展版本備份線上上。當然還有很多視覺化的的程式幫助你編譯 less 檔案，但是在本篇文章中我們將使用 node.js。

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

npm install -g less

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

lessc styles.less > styles.css

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

　　2. 變數

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

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

　　Less 程式碼如下：

@background-color: #ffffff;
@text-color: #1A237E;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

ul{
  background-color: @background-color;
}

li{
  color: @text-color;
}

　　將其編譯成 CSS 程式碼如下：

p{
    background-color: #ffffff;
    color: #1A237E;
    padding: 15px;
}

ul{
    background-color: #ffffff;
}

li{
    color: #1A237E;
}

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

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

　　3. Mixins

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

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}

#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

　　將其轉換成 CSS 程式碼如下

#circle {
    background-color: #4CAF50;
    border-radius: 100%;
}
#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

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

#circle(){
    background-color: #4CAF50;
    border-radius: 100%;
}

#small-circle{
    width: 50px;
    height: 50px;
    #circle
}

#big-circle{
    width: 100px;
    height: 100px;
    #circle
}

　　此時編譯成 CSS :

#small-circle {
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
    border-radius: 100%;
}
#big-circle {
    width: 100px;
    height: 100px;
    background-color: #4CAF50;
    border-radius: 100%;
}

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

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;

    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

　　轉換成 CSS :

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

　　在 官方文件 瞭解更多關於 mixin 的知識。

　　4. 巢狀

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

ul{
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
}

　　編譯成 CSS 程式碼：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
}

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

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

@text-color: #000000;

ul{
    @text-color: #fff;
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        color: @text-color;
        border-radius: 3px;
        margin: 10px 0;
    }
}

　　編譯生成的 CSS 程式碼如下：

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    color: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
}

　　在 這裡 瞭解更多關於作用域的知識。

　　5. 運算

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

@div-width: 100px;
@color: #03A9F4;

div{
    height: 50px;
    display: inline-block;
}

#left{
    width: @div-width;
    background-color: @color - 100;
}

#right{
    width: @div-width * 2;
    background-color: @color;
}

　　編譯成 CSS 如下：

div {
    height: 50px;
    display: inline-block;
}
#left {
    width: 100px;
    background-color: #004590;
}
#right {
    width: 200px;
    background-color: #03a9f4;
}

　　6. 函式

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

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

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

　　編譯成 CSS 如下所示：

div {
    height: 50px;
    width: 50px;
    background-color: #004590;
}
div:hover {
    background-color: rgba(0, 69, 144, 0.5);
}

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

　　英文原文：http://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less/