第128天：less簡單入門

一、預處理 Less

1、官網檔案

> 一款比較流行的預處理CSS，支援變量、混合、函數、嵌套、循環等特點

> [官網](http://lesscss.org/)

> [中文網](http://lesscss.cn/)

> http://www.w3cplus.com/css/less

[less手冊]

www.lesscss.net/

[bootstrap官網less介紹] 

http://www.bootcss.com/p/lesscss/

2、為什麼要有預處理CSS

CSS基本上是設計師的工具，不是程式員的工具。在程式員的眼裡，CSS是很頭痛的事情，它并不像其它程式語言，比如說PHP、Javascript等等，有自己的變量、常量、條件語句以及一些程式設計文法，隻是一行行單純的屬性描述，寫起來相當的費事，而且代碼難易組織和維護。

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

3、什麼是預處理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預處理器。

4、如何使用預處理Less

     less.js

> 網頁運作階段解析LESS檔案

   使用方式：

    less compiler

> 開發階段編譯LESS檔案成為CSS

    使用方式：

    安裝

　　- 安裝Node.js

　　- 安裝less

+ 指令行執行：npm install -g less

　　編譯操作

　　文法

　　注釋

```less

　　// 模闆注釋，這裡的注釋轉換成CSS後将會删除

　　/* CSS 注釋文法 轉換為CSS後任然保留 */

```

　　定義變量

　　> 将需要重複使用或經常修改的值定義為變量，需要使用的地方引用

二、浏覽器端環境搭建

github下載下傳位址：

https://github.com/less/less.js

1、js引入

搭建Less的學習環境非常簡單，隻需在</body>标簽前通過<script type="text/javascript" src="less.js"></script>引入處理器即可實作浏覽器端中将less預編譯為css樣式。

更有效的方式是通過如下代碼監測less樣式，自動編譯為css樣式，進而減少我們修改less代碼後需按F5後才看到實際效果的繁瑣步驟。

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>      

2、less的css樣式處理

less内聯樣式和外聯樣式

基于我們現在使用的是浏覽器端進行預編譯，是以Less可用于内聯樣式和外聯樣式當中。

内聯樣式如下：

<style type="text/less">
  // less 代碼
</style>      

外聯樣式引入如下：

Note:注意rel的值是stylesheet/less

三、文法

1、注釋

// 單行注釋，不會作為最終輸出
/* 
    多行注釋，以原生CSS的/*注釋....*/形式作為最終輸出
 */      

2、變量

 Less中的變量有以下規則：

1. 以@作為變量的起始辨別，變量名由字母、數字、_和-組成
2. 沒有先定義後使用的規定；
3. 以最後定義的值為最終值；
4. 可用于rule值、rule屬性、rule屬性部件、選擇器、選擇器部件、字元串拼接；
5. 定義時 "@變量名: 變量值;" 的形式；引用時采用 "@變量名" 或 "@{變量名}" 的形式；
6. 存在作用域，局部作用域優先級高于全局作用域。

Note:注意直接拷貝網頁中代碼可能因為一些空白符的原因導緻編譯出錯。

less源碼

1 @color: color;
 2   @dialog: .dialog;
 3   @suffix: fix;
 4   // 空格将被忽略，若要保留白格則需要使用單引号或雙引号
 5   @hi: 'hello ';
 6   @dear: there  ;
 7       
 8   .dialog{
 9   // 用于 rule屬性部件，必須使用"@{變量名}" 的形式
10      background-@{color}: #888;
11      // 用于 rule屬性，必須使用"@{變量名}" 的形式
12      @{color}: blue;
13   }
14   // 用于 選擇器，必須使用"@{變量名}" 的形式
15   @{dialog}{
16      width: 200px;
17   }
18   @{dialog}::after{
19      content: ': @{hi}@{dear}!';    // 用于 字元串拼接，必須使用"@{變量名}" 的形式
20   }
21   @h: 1000px;
22   // 用于 選擇器部件，必須使用"@{變量名}" 的形式
23   .ie-@{suffix}{
24      @h: 30px; // 存在作用域，局部作用域優先級高于全局作用域。
25      height: @h; // 用于 屬性值，兩種形式均可使用
26      line-height: 30px;
27   }
28       
29   // 1. 以@作為變量的起始辨別，變量名由字母、數字、_和-組成
30   // 2. 沒有先定義後使用的規定；
31   @dialog-border-color: #666;
32   @dialog-border-width: 10px;
33   @dialog-border-width: 1px; // 3. 以最後定義的值為最終值；      

最終輸出：

1 .dialog {
 2   background-color: #888;
 3   color: blue;
 4 }
 5 .dialog {
 6   width: 200px;
 7 }
 8 .dialog::after {
 9   content: ': hello there!';
10 }
11 .ie-fix {
12   height: 30px;
13   line-height: 30px;
14 }      

四、gulp編譯less

1、安裝

全局安裝：npm install -g less

項目内安裝：npm install gulp-less --save-dev

2、使用

1 var gulp=require("gulp");
 2 var less=require("gulp-less");
 3 
 4 
 5 gulp.task("less",function(){
 6 gulp.src('src/css/*.less')
 7 .pipe(less())
 8 .pipe(gulp.dest("src/css"));
 9 });
10 
11 //監視檔案的變化
12 gulp.task("watch",function(){
13 gulp.watch("src/css/*.less",['less']);
14 });      

 具體的node.js和less的安裝方法，下一篇會詳細介紹http://www.cnblogs.com/le220/p/8146480.html