我們都知道寫 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/