前端利器之less入門

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。一遍一遍寫一大段一大段同樣的代碼，有木有很乏味，若是要換一個contain爲cover呢？編譯以後引用css文件 我推薦使用Koala.exe 下載地址 多語言支持 支持Less、Sass、CoffeeScript 和 Compass Framework。實時編譯 監聽文件，當文件改變時自動執行編譯，這一切都在後臺運行，無需人工操做。項目配置 支持爲項目建立一個全局配置，爲文件設置統一編譯選項。跨平臺 Windows、Linux、Mac都能完美運行。

less 是什麼？

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。less，是方便咱們快速編寫CSS的工具，它加強了CSS代碼的擴展性和複用性。Less 能夠運行在 Node 或瀏覽器端。

less能爲咱們作什麼？

下邊讓咱們來看一段咱們常常寫的代碼

/咱們常常寫瀏覽器的兼容，假設咱們寫icon/nav a.home.active i { background: url('images/nav-home-on.png') no-repeat center; background-size: contain; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain;}nav a.home i { background: url('images/nav-home-off.png') no-repeat center; background-size: contain; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain;}nav a.topics.active i { background: url('images/nav-circle-on.png') no-repeat center; background-size: contain; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain;}nav a.topics i { background: url('images/nav-circle-off.png') no-repeat center; background-size: contain; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain;}一遍一遍寫一大段一大段同樣的代碼，有木有很乏味，若是要換一個contain爲cover呢？改瘋了有木有讓咱們看看less會怎麼作

//至關於新建一個函數 Mixins（混入）.border-radius(@radius:10px){border-radius:@radius; -webkit-border-radius:@radius; -moz-border-radius:@radius; -o-border-radius:@radius;}.background-size(@type){ background-size: @type; -webkit-background-size: @type; -moz-background-size: @type; -o-background-size: @type;}//用法.orderList{ background-color:#E36264; width:100px; height:200px; .border-radius(15px);//利用函數能夠省去不少的重複兼容代碼 .border-radius;//利用函數能夠省去不少的重複兼容代碼 .background-size(contain);}//這麼寫整個世界都美好了nav a.topics i { background: url('images/nav-circle-off.png') no-repeat center; .background-size(contain);}說明 像 JavaScript 中 arguments同樣，Mixins 也有這樣一個變量：@arguments。@arguments 在 Mixins 中具是一個很特別的參數，當 Mixins 引用這個參數時，該參數表示全部的變量，不少狀況下，這個參數能夠省去你不少代碼。.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } #header { .boxShadow(2px,2px,3px,#f36); }變量寫法

less代碼

/ 你們都遇到過這樣的問題 咱們作換膚功能的時候都有一個主色調， 咱們寫完了代碼設計師說我想更換個主色調， 這時候你就會發現，我有100個地方用了主色調， 而後只能苦逼的改100次 太難受了！！有木有？？有一個變量直接提出來多好？///定義一個變量@colorFff:#fff;//用法footer{ background-color: @colorFff}nav{ color: @colorFff;}header{ border-right:1px solid @colorFff;}最終生成的代碼

footer { background-color: #ffffff;}nav { color: #ffffff;}header { border-right: 1px solid #ffffff;}代碼片斷寫法

less代碼

//又是重複代碼，less告訴你能夠這麼寫 有沒有以爲本身很會過日子，原來能夠這麼省//定義一個公共樣式.icon20{ width: 20px; height: 20px; display: inline-block;}//用起來.icon-my{ .icon20; background: url('images/nav-my-off.png') no-repeat center; .background-size(contain);}.icon-car{ .icon20; background: url('images/nav-car-off.png') no-repeat center; .background-size(contain);}對應生成的css又是重複代碼，less告訴你能夠這麼寫 有沒有以爲本身很會過日子，原來能夠這麼省

.icon-my{ width: 20px; height: 20px; display: inline-block; background: url('images/nav-my-off.png') no-repeat center;}.icon-car{ width: 20px; height: 20px; display: inline-block; background: url('images/nav-car-off.png') no-repeat center;}有時候咱們須要引用一段less文件 生辰八字起名字

寫法

/ LESS Document ///引入一個公共的less文件@import "base.less";嵌套寫法

//這樣的css代碼你該不陌生.shopcar-item { font-size: 1.5rem; background-color: #ffffff; position: relative; padding: 10px 10px 10px 70px; border-bottom: 1px solid #ededed;}.shopcar-item img { width: 100%;}//我要選img必須加上前邊的那個，好吧 這樣還能夠接受，那麼這樣呢？.shopcar-item .item-con .add-btn,.shopcar-item .item-con .mul-btn { display: inline-block; padding: 5px 10px; background-color: #ff4354; color: #ffffff; border-radius: 5px; margin: 0 5px;}咱們來看看less怎麼寫

//看看 嵌套關係清晰明瞭 告別冗長的選擇器.shopcar-item { font-size: 1.5rem; background-color: #ffffff; position: relative; padding: 10px 10px 10px 70px; border-bottom: 1px solid #ededed; img { width: 100%; } .item-con{ position: relative; .add-btn,.mul-btn{ display: inline-block; padding: 5px 10px; background-color: #ff4354; color: #ffffff; border-radius: 5px; margin: 0 5px; } }}而且寫法

用less以前咱們這麼寫

.nav { background-color: #ededed;}.nav.focus { background-color: #cccccc;}.nav:after { content: ""; display: block; width: 100px; height: 100px;}less告訴你，咱們能夠這麼寫，一個元素的各類狀態一目瞭然

.nav{ background-color: #ededed; &.focus{ background-color: #cccccc; } &:after{ content: ""; display: block; width: 100px; height: 100px; }}運算及函數

//運算及函數@init: #111111;@transition: @init*2;.switchColor { color: @transition;}最終生成的樣式

.switchColor { color: #222222;}上面的例子中使用 LESS 的 operation 是 特性，其實簡單的講，就是對數值型的 value（數字、顏色、變量等）進行加減乘除四則運算咱們作響應式佈局適配的時候常常要計算rem，

用less告別手動計算

.px2rem(@name, @px){ @{name}: @px / 75 * 1rem;}.orderList{ .px2rem(font-size,32); background-color:#E36264; width:100px; height:200px;}//最終生成的css.orderList { font-size: 0.42666667rem; background-color: #E36264; width: 100px; height: 200px;}less這麼好用怎麼用？？

在瀏覽器端用<link rel="stylesheet/less" type="text/css" href="index.less" /><script type="text/javascript" src="js/less.2.5.3.js"></script>//注：一、順序不能錯二、設置屬性 rel="stylesheet/less" 三、代碼須要服務器環境運行編譯以後引用css文件我推薦使用Koala.exe 下載地址多語言支持 支持Less、Sass、CoffeeScript 和 Compass Framework。實時編譯 監聽文件，當文件改變時自動執行編譯，這一切都在後臺運行，無需人工操做。編譯選項 能夠設置各個語言的編譯選項。項目配置 支持爲項目建立一個全局配置，爲文件設置統一編譯選項。錯誤提示 在編譯時若是遇到語法的錯誤，koala將在右下角彈出錯誤信息，方便開發者定位代碼錯誤位置。跨平臺 Windows、Linux、Mac都能完美運行。

koala.png

設置語言

lang.png

添加項目

Paste_Image.png

編譯less文件手動運行 【執行編譯】或者點擊文件勾選自動編譯，它會自動檢測文件更改並從新編譯

Paste_Image.png

其餘用法參見 LESS官網