less入門及基礎學習（建議有css基礎）

本文整理自：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