Less 簡介

什麼是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等新特性，歡迎嚐鮮。詳細變動請見更新日誌。

• 1.5.0
• 1.4.2

若是您須要在IE六、七、8中使用，請先在引入less.js前先引入es5-shim。