Less

• 同類型：Sass 、styuls

一款比較流行的預(yù)處理CSS，支持變量、混合、函數(shù)、嵌套、循環(huán)等特點(diǎn)
官網(wǎng)
中文網(wǎng)
http://www.w3cplus.com/css/less

概要

為什么要有預(yù)處理CSS

CSS基本上是設(shè)計(jì)師的工具，不是程序員的工具。在程序員的眼里，CSS是很頭痛的事情，它并不像其它程序語(yǔ)言，比如說PHP、Javascript等等，有自己的變量、常量、條件語(yǔ)句以及一些編程語(yǔ)法，只是一行行單純的屬性描述，寫起來相當(dāng)?shù)馁M(fèi)事，而且代碼難易組織和維護(hù)。

很自然的，有人就開始在想，能不能給CSS像其他程序語(yǔ)言一樣，加入一些編程元素，讓CSS能像其他程序語(yǔ)言一樣可以做一些預(yù)定的處理。這樣一來，就有了“CSS預(yù)處器（CSS Preprocessor）”。

什么是預(yù)處理CSS

• CSS語(yǔ)言的超集，比CSS更豐滿

CSS預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專門的編程語(yǔ)言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。通俗的說，CSS預(yù)處理器用一種專門的編程語(yǔ)言，進(jìn)行Web頁(yè)面樣式設(shè)計(jì)，然后再編譯成正常的CSS文件，以供項(xiàng)目使用。CSS預(yù)處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡(jiǎn)單的邏輯程序、函數(shù)等等在編程語(yǔ)言中的一些基本特性，可以讓你的CSS更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于代碼的維護(hù)等諸多好處。

CSS預(yù)處理器技術(shù)已經(jīng)非常的成熟，而且也涌現(xiàn)出了很多種不同的CSS預(yù)處理器語(yǔ)言，比如說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS預(yù)處理器，那么“我應(yīng)該選擇哪種CSS預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術(shù)論壇上，很多人為此爭(zhēng)論不休。相比過計(jì)我們對(duì)是否應(yīng)該使用CSS預(yù)處理器的話題而言，這已經(jīng)是很大的進(jìn)步了。

到目前為止，在眾多優(yōu)秀的CSS預(yù)處理器語(yǔ)言中就屬Sass、LESS和Stylus最優(yōu)秀，討論的也多，對(duì)比的也多。本文將分別從他們產(chǎn)生的背景、安裝、使用語(yǔ)法、異同等幾個(gè)對(duì)比之處向你介紹這三款CSS預(yù)處理器語(yǔ)言。相信前端開發(fā)工程師會(huì)做出自己的選擇——我要選擇哪款CSS預(yù)處理器。

如何使用預(yù)處理Less

less.js

網(wǎng)頁(yè)運(yùn)行階段解析LESS文件

使用方式：

less compiler

開發(fā)階段編譯LESS文件成為CSS

使用方式：

• cd less文件所在的目錄
• lessc xxx.less生成的css在控制臺(tái)輸出
• lessc xxx.less > xxx.css生成的css放入xxx.css

安裝

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

編譯操作

語(yǔ)法

注釋

// 模板注釋，這里的注釋轉(zhuǎn)換成CSS后將會(huì)刪除
/* CSS 注釋語(yǔ)法 轉(zhuǎn)換為CSS后任然保留 */

定義變量

將需要重復(fù)使用或經(jīng)常修改的值定義為變量，需要使用的地方引用

• less

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

• css

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

嵌套

如果你在CSS中經(jīng)常使用子代選擇器，那LESS的嵌套語(yǔ)法使用起來非常Happy

• less

/*

:直接子代
&:當(dāng)級(jí)元素
*/
.container {
width: @containerWidth;
.row {
height: 100%;
a{
color: #f40;
&:hover{
color: #f50;
}
}
}
div {
width: 100px;
.hello {
background-color: #00f;
}
}
}

- css

```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

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

Import

我們可以在開發(fā)階段將樣式放到多個(gè)文件中，最后通過@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;
  }
  

函數(shù)

內(nèi)置函數(shù)

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

自定義函數(shù)等講流行框架再說

安裝NodeJS

• 安裝node-v5.2.0-x64.msi，我的安裝目錄：D:\Program Files\nodejs
• 配置環(huán)境變量
• cd D:\Program Files\nodejs
• 安裝less：npm install -d less
• 配置環(huán)境變量。我的路徑如下：D:\Program Files\nodejs\node_modules\.bin

測(cè)試源碼：

css/_part.less

/*在被導(dǎo)入的less文件中可以使用導(dǎo)入的less中的變量*/
p{
  line-height: @h;
}

css/main.less

//定義變量
@bgColor:#e23922;
@mainColor:#f0f0f0;
@width:100px;

/*
  >直接子代
  &當(dāng)級(jí)元素
*/
body{
  background-color: @bgColor;
}
.container{
  width: 1000px;
  background-color: #ff0;
  .row{
    height: @width;
    div{
      border-left: 1px solid @mainColor;
      >a{
        color: red;
        &:hover{
          color: green;
        }
      }
    }
  }
}

/*
  定義一個(gè)類
*/
//定義代碼段，（）里的內(nèi)容是參數(shù)，參數(shù)中:后的內(nèi)容是參數(shù)的默認(rèn)值（沒有傳參數(shù)）
.roundedCorner(@radius :5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  -ms-border-radius:@radius;
  border-radius: @radius;
}

#header{
  .roundedCorner();
}
#footer{
  .roundedCorner(10px);
}

@h:120px;
@import url("_part.less");

Less使用

• less執(zhí)行方式一
  使用lessc命令生成.css的代碼，在html中引入css文件
• 使用less.js
  在html中直接引入.less文件，不過需要引入less.js

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet/less" href="css/main.less">
</head>
<body>
    <script type="text/javascript" src="lib/less/less.min.js"></script>
</body>
</html>

在瀏覽器端生成的代碼如下：