Less 簡介

水之原發表於2013-12-26

什麼是LESSCSS

LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變數、繼承、運算、函式等，更方便CSS的編寫和維護。

LESSCSS可以在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。

語言特性快速預覽：

變數：

變數允許我們單獨定義一系列通用的樣式，然後在需要的時候去呼叫。所以在做全域性樣式調整的時候我們可能只需要修改幾行程式碼就可以了。

LESS原始碼：

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

編譯後的CSS：

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

混合（Mixins）

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

LESS原始碼：

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

編譯後的CSS：

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

巢狀

我們可以在一個選擇器中巢狀另一個選擇器來實現繼承，這樣很大程度減少了程式碼量，並且程式碼看起來更加的清晰。

LESS原始碼：

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

編譯後的CSS：

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

函式和運算

運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的複雜關係。LESS中的函式一一對映了JavaScript程式碼，如果你願意的話可以操作屬性值。

LESS原始碼：

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

編譯後的CSS：

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

更多說明

更多更詳細的語法特性請參見語言文件

快速上手

LESSCSS的使用是很容易的，首先，使用你最常使用的程式碼編輯器，按LESSCSS的語法規則寫好.less檔案，接下來，使用編譯工具它編譯成.css，最後再引入頁面即可。

GUI編譯工具

為方便起見，建議初學者使用GUI編譯工具來編譯.less檔案，以下是一些可選GUI編譯工具：

  1. koala(Win/Mac/Linux)

    國人開發的LESSCSS/SASS編譯工具。下載地址：http://koala-app.com/index-zh.html

  2. Codekit(Mac)

    一款自動編譯Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含語法檢查、圖片優化、自動重新整理等附加功能。下載地址http://incident57.com/codekit/

  3. WinLess(Win)

    一款LESS編譯軟體。下載地址http://winless.org/

  4. SimpleLess(Win/Mac/Linux)

    一款LESS編譯軟體。下載地址http://wearekiss.com/simpless

Node.js庫

LESSCSS官方有一款基於Node.js的庫，用於編譯.less檔案。

使用時，首先全域性安裝less（部分系統下可能需要在前面加上sudo切換為超級管理員許可權）：

npm install -g less

接下來就可以使用lessc來編譯.less檔案了：

lessc example/example.less example/example.css

更多選項可以直接執行lessc檢視說明。

瀏覽器端使用

LESSCSS也可以不經編譯，直接在瀏覽器端使用。

使用方法：

  1. 下載LESSCSS的.js檔案，例如lesscss-1.4.0.min.js。

  2. 在頁面中引入.less檔案

    <link rel="stylesheet/less" href="example.less" />

    需要注意rel屬性的值是stylesheet/less，而不是stylesheet。

  3. 引入第1步下載的.js檔案

    <script src="lesscss-1.4.0.min.js"></script>

需要特別注意的是，由於瀏覽器端使用時是使用ajax來拉取.less檔案，因此直接在本機檔案系統開啟（即地址是file://開頭）或者是有跨域的情況下會拉取不到.less檔案，導致樣式無法生效。

還有一種情況容易導致樣式無法生效，就是部分伺服器（以IIS居多）會對未知字尾的檔案返回404，導致無法正常讀取.less檔案。解決方案是在伺服器中為.less檔案配置MIME值為text/css（具體方法請搜尋）。或者還有一種更簡單的方法，即是直接將.less檔案改名為.css檔案即可。

 

less.js下載

 

LESS 1.5已經放出穩定版本，支援source map等新特性，歡迎嚐鮮。詳細變更請見更新日誌。

如果您需要在IE6、7、8中使用，請先在引入less.js前先引入es5-shim。

 

相關文章