Less:優雅的寫CSS代碼

css是不能夠定義變量的，也不能嵌套。它沒有編程語言的特性。在項目開發中，常常發現有很多css代碼是相同的，但我們通常都是復制然后粘貼。

舉個例子：假設h5應用里主題色是#FF3A6D，可能用於文字或者背景色。通常開發中，哪里需要這個顏色，我們就復制這個顏色並粘貼。下次要修改就得全部查找批量替換，其實不是很方便。

本文即將介紹的less將讓我們更快更方便的編寫css代碼。

Less是什么

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便制作主題、擴充。

less使用.less作為文件后綴。通過第三方工具，可以一鍵或者實時編譯成對應的css文件。

示例：
demo.less

 @base: #f938ab;/*定義變量*/
.box {
  color: @base;
  border-color: lighten(@base, 30%); /*使用函數*/
  /*嵌套*/
  &-content{
    width:100%;
  }
  .title{
  	color:#ccc;
  }
}

通過第三方工具，編譯后生成：
demo.css

.box {
  color: #f938ab;
  border-color: #fdcdea;
}
.box-content {
  width: 100%;
}
.box .title {
  color: #ccc;
}

實際項目中，我們編輯的是.less文件，但引用時依舊像往常一樣引用.css文件。通過第三方工具（例如Koala），可以實現.less文件一發生改變，就生成同名的.css文件。后文有介紹，等不及的同學可以先去看看怎么編譯成css文件，再返回來看less相關特性和例子。

語言特性

由於less文件本身就是文本，所以不用特別安裝什么編輯器，通常的代碼編輯器都能進行編輯。推薦使用sublime text（建議安裝插件Less，以支持less語法高亮）。

變量

使用@符號定義。例如：

@base: #f938ab;
.box {
    color: @base; /*變量引用*/
}

變量的作用就是把值定義在一個地方（或一個文件里，通過@import導入），然后在各處使用，這樣能讓代碼更易維護。

變量也支持URLs：

// Variables
@images: "../img";

// 用法
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

屬性也支持變量的形式：

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

混合（Mixin）

混合就是前面定義的一個樣式，后文可以直接引用。示例：

@base: #f938ab;
.ellipsis_txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.box {
	color: @base;
	.ellipsis_txt;
	/*或者
	.ellipsis_txt();
	*/
}

括號是可選的。

嵌套

可以在一個css里有多個css塊，以方便我們更好的組織代碼，編寫css模板。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

生成：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

還支持&符號：

#header {
  color: black;
  &-navigation {
    font-size: 12px;
  }
  &-logo {
    width: 300px;
  }
  &:hover{
  	color:#ccc;
  }
}

生成：

#header {
  color: black;
}
#header-navigation {
  font-size: 12px;
}
#header-logo {
  width: 300px;
}
#header:hover {
  color: #ccc;
}

運算

任何數字、顏色或者變量都可以參與運算。下面是一組案例：

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

示例：

@var: 1px + 5;
div{
	width:@var;
}

輸出：

div {
  width: 6px;
}

函數

Less 內置了多種函數用於轉換顏色、處理字符串、算術運算等。這些函數在函數手冊中有詳細介紹。

函數的用法非常簡單。下面這個例子將介紹如何將 0.5 轉換為 50%，將顏色飽和度增加 5%，以及顏色亮度降低 25% 並且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

編譯生成：

.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

命名空間

有時候，你可能為了更好組織 CSS 或者單純是為了更好的封裝，將一些變量或者混合模塊打包起來，一些屬性集之后可以重復使用。
示例：

/*模塊*/
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { /**/ }
  .citation { /**/ }
}

/*下面復用上面的一部分代碼*/
#header a {
  color: orange;
  #bundle > .button;
}

編譯生成：

#bundle .button {
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#bundle .button:hover {
  background-color: white;
}
#bundle .tab {
  /**/
}
#bundle .citation {
  /**/
}

/*下面復用上面的一部分代碼*/
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}

LESS中的命名空間，屬於高級語法，在日常項目中應用比較廣泛。我們可以用LESS中的命名空間為自己封裝一些日常比較常用的類名，以便以后做項目的時候更有效率。

作用域

子類里面的優先，找不到才往父類里找。

示例：

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // 這里值是white
  }
}

也不會因為變量后面定義而影響作用域：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

和上面的例子是一樣的。

注釋

css僅支持塊注釋。less里塊注釋和行注釋都可以使用：

/* 一個注釋塊
style comment! */
@var: red;

// 這一行被注釋掉了！
@var: white;

導入

和css一樣，你可以導入一個 .less 文件，此文件中的所有變量就可以全部使用了。如果導入的文件是 .less 擴展名，則可以將擴展名省略掉：

@import "library"; // library.less
@import "typo.css";

函數參考

這些平常應該用的不多吧。

color(string) 解析顏色,將代表顏色的字符串轉換為顏色值
convert(value,unit) 將數字從一種單位轉換到另一種單位.第一個參數為帶單位的數值,第二個參數為單位.
ceil(number)向上取整
floor(number)向下取整
percentage(number)將浮點數轉換為百分比字符串
round(number)四舍五入取整
sqrt(number)計算一個數的平方根,並原樣保持單位
pow(number,number)設第一個參數為A,第二個參數為B,返回A的B次方.
mod(number,number)返回第一個參數對第二參數取余的結果.
min(value1, ..., valueN)返回一系列值中最小的那個.
max(value1, ..., valueN)返回一系列值中最大的那個.
abs(number)計算數字的絕對值,並原樣保持單位
sin(number)正弦函數
cos(number)余弦函數
asin(number)反正弦函數.返回以弧度為單位的角度,區間在 -PI/2 到 PI/2之間.
acos(number)反余弦函數.區間在 0 到 PI之間.
tan(number)正切函數
atan(number)反正切函數
pi()返回圓周率 π (pi)
isnumber(value)如果待驗證的值為數字則返回 true,否則返回 false
isstring(value)如果待驗證的值是字符串則返回 true,否則返回 false
iscolor(value)如果待驗證的值為顏色則返回 true,否則返回 false

更多：http://less.bootcss.com/functions/

如何編譯

第三方的編譯工具有很多，下面列舉常用的。

命令行lessc

官網：http://lesscss.org
github：http://github.com/less/less.js

需要先安裝node.js。

安裝好nodejs后，在命令行輸入：

npm install -g less

以安裝lessc。

安裝 Less 后，就可以在命令行上調用 Less 編譯器了，如下：

lessc styles.less

這將輸出編譯之后的 CSS 代碼到stdout，你可以將輸出重定向到一個文件：

lessc styles.less > styles.css

若要輸出壓縮過的 CSS，只需添加 -x 選項:

lessc styles.less > styles.css -x

如果希望獲得更好的壓縮效果，還可以通過 --clean-css 選項啟用 Clean CSS 進行壓縮，需要先安裝好插件：

npm install -g less-plugin-clean-css

執行 lessc 且不帶任何參數，就會在命令行上輸出所有可用選項的列表。

lessc暫不支持實時編譯。

Koala

官網：http://koala-app.com/index-zh.html
下載：https://pan.baidu.com/s/1o7wLvPg

使用Koala是因為它是個客戶端，更簡單。更重要的，還能實時編譯，這對於實際開發很有幫助。

koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平台運行，完美兼容windows、linux、mac。

使用起來很簡單，只需要將less文件所在的目錄拖到軟件工作窗口，選擇需要編譯的less文件就行了。只要你改動less文件里的代碼，就會自動生成同名的css文件。速度非常快。感興趣的可以下載試試。

Sublime Text 2 & 3

Less-sublime：less語法高亮
lessc：Less 即時保存編譯 CSS 插件

HBuilder

官網：http://www.dcloud.io/

一款國人開發的很不錯的代碼編輯器，基於eclipse，前端的同學建議下載。
號稱：飛速編碼的極客工具，手指爽，眼睛爽。支持php、jsp、ruby、python、nodejs等web語言，less、coffee等編譯型語言。代碼提示功能真的很強大。

該軟件默認安裝了less4j，支持實時將less文件編譯成同名的css文件。對less的代碼提示是我見過最強大的，變量什么的都會提示。

Notepad++

僅支持語法高亮。
Less.js 語法高亮，by azrafe7
Less.js 語法高亮， by Raúl Salitrero

gulp

同樣需要先安裝node.js。

然后安裝：

npm install --save-dev gulp

接着安裝less插件：

npm install gulp-less --save-dev

開始任務配置：
gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('doless', function () {
  return gulp.src('css/*.less')
    .pipe(less())
    .pipe(gulp.dest('build'));
});

gulp.task('watch', function () {
   gulp.watch('css/*.less', ['doless']);
});

在命令行執行：

gulp watch

我們現在去編輯css/demo.less文件，會自動在build目錄生成demo.css文件。

更多less編譯工具查看：http://less.bootcss.com/usage/#guis-for-less

參考

1、快速入門 | Less.js 中文文檔
http://less.bootcss.com/#
2、Less 中文網
http://lesscss.cn/
3、less/less-docs: Documentation for Less.
https://github.com/less/less-docs