## 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 文件引入到页面中去