Less 入門

原文連結：www.jianshu.com

這篇文章來自 Danny Markov， 是我最喜歡的博主之一，實際上我最近翻譯的一些文章全是出自他手。
在檢視本文之前你也可以 檢視原文。



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嵌入樣式表，在 這裡 檢視這些函式的列表。


複製程式碼