## Less 概述 ### Less是什么? > Less是一門css預處理語言 ### css存在的缺陷？ > 缺乏邏輯，缺乏繼承和復用能力，不同的瀏覽器語法差異性大。 > 為了讓 CSS 富有邏輯性，短板不那么嚴重，涌現出了 一些神奇的預處理語言。 它們讓 CSS 徹底變成一門 可以使用 變量 、循環 、繼承 、自定義方法等多種特性的標記語言，邏輯性得以大大增強。比如Less，Sass！ ### Less 為css帶來了什么能力？ > * Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。 > * Less 可以運行在 Node 或瀏覽器端。 ### Less初次見面！ 復用能力 * css寫法： ``` #box{ width:100px; height:100px; border-top:dotted 1px black; border-bottom:solid 2px black; } #list{ width:20px; height:40px; border-top:dotted 1px black; border-bottom:solid 2px black; } ``` * 改成less寫法： ``` .border-set() { border-top: dotted 1px black; border-bottom: solid 2px black; } #box { width:100px; height:100px; .border-set(); } #list { width:20px; height:40px; .border-set(); } ``` 邏輯能力： less寫法 ~~~ .mixin (@a) when (@a = 20px){ color:red; } .mixin (@a) when (@a < 20px){ color:blue; } ~~~ ~~~ h2 { .mixin(20px) } h3 { .mixin(10px) } ~~~ 等同于css ~~~ h2 { color:red; } h3 { color:blue; } ~~~ 繼承能力： ~~~ .a { color:red; } .b:extend(.a){} ~~~ ~~~ .a { color:red; } .b { color:red; } ~~~ 兼容解決 ~~~ .a{ -webkit-animation:fadeIn 1s; -moz-animation:fadeIn 1s; -ms-animation:fadeIn 1s; -o-animation:fadeIn 1s; animation:fadeIn 1s; } .b{ -ms-transition: width 2s;/*IE*/ -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ transition:width 2s; /*標準寫法*/ } ~~~ ~~~ .pre(@style,@value){ -webkit-@{style}: @value; -moz-@{style}: @value; -ms-@{style}: @value; @{style}: @value; } .animation(@value){ .pre(animation,@value); } .transition(@arg){ .pre(transition,@arg); } .a{ .animate(1s); } .b{ .transition(2s); } ~~~ ### 如何在瀏覽器端運行Less? 假設你編寫了一個study.less的文件 * 方法一 1.首先直接在頁面引入你編寫的study.less文件 2.然后在less文件后面再引入less.js (less官網可下載到) 3.注意順序，less.js必須放在你書寫的less文件后面 ```html <link rel="stylesheet/less" type="text/css" href="study.less" /> <script src="less.js" type="text/javascript"></script> ``` * 方法二 ```js $ npm install -g less $ lessc study.less study.css ``` 然后再把生成的study.css 文件引入到頁面中去