LESS

Less

Sass styuls

一款比較流行的預處理CSS，支持變量、混合、函數、嵌套、循環等特色
官網
中文網
http://www.w3cplus.com/css/less

概要

爲何要有預處理CSS

CSS基本上是設計師的工具，不是程序員的工具。在程序員的眼裏，CSS是很頭痛的事情，它並不像其它程序語言，好比說PHP、Javascript等等，有本身的變量、常量、條件語句以及一些編程語法，只是一行行單純的屬性描述，寫起來至關的費事，並且代碼難易組織和維護。

很天然的，有人就開始在想，能不能給CSS像其餘程序語言同樣，加入一些編程元素，讓CSS能像其餘程序語言同樣能夠作一些預約的處理。這樣一來，就有了「CSS預處器（CSS Preprocessor）」。

什麼是預處理CSS

• CSS語言的超集，比CSS更豐滿

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲CSS增長一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

CSS預處理器技術已經很是的成熟，並且也涌現出了不少種不一樣的CSS預處理器語言，好比說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS預處理器，那麼「我應該選擇哪一種CSS預處理器？」也相應成了最近網上的一大熱門話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術論壇上，不少人爲此爭論不休。相比過計咱們對是否應該使用CSS預處理器的話題而言，這已是很大的進步了。

到目前爲止，在衆多優秀的CSS預處理器語言中就屬Sass、LESS和Stylus最優秀，討論的也多，對比的也多。本文將分別從他們產生的背景、安裝、使用語法、異同等幾個對比之處向你介紹這三款CSS預處理器語言。相信前端開發工程師會作出本身的選擇——我要選擇哪款CSS預處理器。

如何使用預處理Less

less.js

網頁運行階段解析LESS文件

使用方式：

less compiler

開發階段編譯LESS文件成爲CSS

使用方式：

安裝

• 安裝Node.js
• 安裝less
  • 命令行執行：npm install -g less

編譯操做

語法

註釋

// 模板註釋，這裏的註釋轉換成CSS後將會刪除
/* CSS 註釋語法 轉換爲CSS後任然保留 */

定義變量

將須要重複使用或常常修改的值定義爲變量，須要使用的地方引用

• less

  @變量名: 變量值;
  @bgColor: #f5f5f5;
  
  body{
    width: @變量名;
    background-color: @bgColor;
  }

• css

  body{
    width: 變量值;
    background-color: #f5f5f5;
  }

嵌套

若是你在CSS中常常使用子代選擇器，那LESS的嵌套語法使用起來很是Happy

• less

  .container {
    width: @containerWidth;
    > .row {
      height: 100%;
      a{
        color: #f40;
        &:hover{
          color: #f50;
        }
      }
    }
    div {
      width: 100px;
      .hello {
        background-color: #00f;
      }
    }
  }

• css

  .container {
    width: 1024px;
  }
  .container > .row {
    height: 100%;
  }
  .container > .row a {
    color: #f40;
  }
  .container > .row a:hover {
    color: #f50;
  }
  .container div {
    width: 100px;
  }
  .container div .hello {
    background-color: #00f;
  }

Mixin

/* 定義一個類 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
/* 定義的類應用到另個一個類中 */
＃header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

Import

咱們能夠在開發階段將樣式放到多個文件中，最後經過@import 的方式合併

• less

  // main.less
  @btnColor: red;
  @import url('_buttom.less');
  
  body{
    width: 1024px;
  }
  
  // _buttom.less
  .btn{
    color: @btnColor;
  }

• css

  .btn{
    color: red;
  }
  body{
    width: 1024px;
  }

函數

內置函數

• lighten：將一個顏色變亮
  • lighten(#000, 10%); // #1a1a1a
• darken：將一個顏色變暗
  • darken(#000, 10%); // #e6e6e6

自定義函數等講流行框架再說

安裝NodeJS