- less的安装与基本使用
- less的语法及特性
一、本地使用less的方法
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。是一种动态样式语言，属于css预处理语言的一种。
下载后找到less.js：less.js-2.5.3\dist\less.js
也可以直接使用CDN缓存： <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
注意link的rel属性： <link rel="stylesheet/less" type="text/css" href="styles.less" />
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet/less" type="text/css" href="demo.less" /> 9 </head> 10 <body> 11 <div class="wrapper"> 12 <div class="box"> 13 <ul> 14 <li><a href="">aaaa</a></li> 15 <li><a href="">aaaa</a></li> 16 <li><a href="">aaaa</a></li> 17 <li><a href="">aaaa</a></li> 18 <li><a href="">aaaa</a></li> 19 </ul> 20 </div> 21 </div> 22 <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> 23 </body> 24 </html>
1 *{ 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 text-decoration: none; 6 body{ 7 background-color: #ccc; 8 .wrapper{ 9 position: relative; 10 width: 500px; 11 height: 500px; 12 margin:200px auto; 13 border: 1px solid #000; 14 .box{ 15 position: absolute; 16 width: 200px; 17 height: 200px; 18 top: 50%; 19 left: 50%; 20 margin-top: -100px; 21 margin-left: -100px; 22 border:1px solid #000; 23 } 24 } 25 } 26 }
注意本地测试时需要放到本地服务下，在less.js中会有ajax网络请求，直接使用本地文件路径打开页面会报错。
二、在nodejs环境中使用less
1.安装less到全局
npm install less -g
2.通过lessc指令将less文件编译转换成css文件
lessc demo.less demo.css
执行完成以后会生成一个demo.css文件，上面示例中的demo.less被编译转换成demo.css文件的代码如下;
1 * { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 text-decoration: none; 6 } 7 * body { 8 background-color: #ccc; 9 } 10 * body .wrapper { 11 position: relative; 12 width: 500px; 13 height: 500px; 14 margin: 200px auto; 15 border: 1px solid #000; 16 } 17 * body .wrapper .box { 18 position: absolute; 19 width: 200px; 20 height: 200px; 21 top: 50%; 22 left: 50%; 23 margin-top: -100px; 24 margin-left: -100px; 25 border: 1px solid #000; 26 }
注：在webpack中使用less会在后期的webpack相关博客中解析。
三、less的语法及特性
1.注释编译：less中的双斜杠注释不会被编译到css文件中，但是包裹注释会被编译到css文件中
// 双斜杠注释不会被编译到css文件中 /*我可以出现在css文件中*/
编译后的结果：
/*我可以出现在css文件中*/
2.变量与运算
1 @ince-blue:#5B83AD; 2 @light-blue:@ince-blue + #ff0; 3 //@light-blue的实际颜色是由@ince-blue + #ff0得到的，实际颜色值是#ffffad 4 //在less中直接将变量应用到样式中 5 background-color:@light-blue;
可以运算的值当然还有像素值：
@list-width:300px;
@list-height:@list-width * 2;
2.1.变量也可以说是可变插值，上面的示例中展示的都是使用变量来控制CSS样式值，less中的变量除了可以控制css样式值以外，还可以被用作选择器名称、属性名称、URL和@import语句。
2.1.1.变量控制选择器
1 @my-selector:banner; 2 3 .@{my-selector}{ 4 // 这里是类选择器banner的具体的样式 5 }
2.1.2.变量控制网址（URL）
1 @images: "../img"; 2 3 div{ 4 background: url("@{imges}/mei.png"); 5 }
2.1.3.变量与导入语句
@themes: "../../src/themes"; @import "@{themes}/tidal-wave.less"
2.1.4.变量与属性
@property-color:color; span{ @{property-color}: #0ee; }
2.1.5.变量与变量名
1 @fnord: "I am fnord."; 2 @var: 'fnord'; 3 content: @@var; 4 5 //编译为 6 content: "I am fnord.";
2.1.6.变量的作用域与延迟加载
1 body{ 2 div{ 3 @size:14px; 4 .p1{ 5 @size:18px; 6 font-size:@size; 7 } 8 ul{ 9 font-size:@size; 10 } 11 .p2{ 12 font-size:@size; 13 } 14 } 15 }
less作用域类似JS的块级作用域，当前作用域有该变量就取当前作用域的变量值。当前作用域没有的话就取沿着作用域链往外层作用域匹配。
2.1.6.1.但是要注意的是，这并不能说明less的变量作用域就完全与JS的作用域相同，恰恰相反它们有很大的区别。比如延迟加载：
1 div{ 2 @col-p:#ffo; 3 p{ 4 color:@col-p; 5 @col-p:#000; 6 } 7 } 8 //编译结果 9 div p{ 10 color:#000; 11 }
2.1.6.2.这种延迟加载还存在作用域上，例如下面这种情况：
1 //情况以 2 .lazy-eval { 3 width: @var; 4 } 5 6 @var: @a; 7 @a: 9%; 8 //情况二 9 .lazy-eval-scope { 10 width: @var; 11 @a: 9%; 12 } 13 14 @var: @a; 15 @a: 100%;
以上这两种情况都编译成下面这css代码：
.lazy-eval-scope { width: 9%; }
2.1.6.3.如果出现当前作用域和外层作用域的延迟加载问题时，当前作用域有该变量直接使用当前作用域的，没有当前作用域的话使用外层作用域的变量。
2.2混入：从一个规则集引入到另一个规则集的方式。
在CSS代码中经常会出现比较多的重复的代码，但是在原生的CSS中没有太好的方法可以解决，当然也不是没有，比如使用单独的类名抽离，但是这带来了HTML文件中的class属性值会增加很多，在Less中采用了混合的语法解决了这个问题。
1 .border{ 2 border:1px solid #000; 3 } 4 div{ 5 .border;//引入边框样式 6 }
示例中的混合写法，在引用时采用了简写方式，大家第一眼这代码是不是特别像类的选择器写法，其实不然，less标准的混合引入是要在后面带小括号的，所以示例中的标准写法是“.border()”。这一种简写和一种标准写法都没什么差别，具体遵循自己的开发文档的标准或者个人习惯就好。
看到这个引入方式是不是有了一些启发呢？既然引入标准语法是可以带小括号，这个小括号就不是随便放在那里的，而是有一定的实际意义。这个实际意义就是混入可以理解为JS中的方法，在定义的时候可以定义形参，然后在引用的时候传入实参：
1 .border(@width,@color){ 2 border:@width solid @color; 3 } 4 div{ 5 .border(1px,#000); 6 }
还可以使用默认值定义混入规则：
1 .border(@width:1px,@color:#000){ 2 border:@widht solid @color; 3 } 4 div{ 5 .border; 6 }
这个看上去比JS更强大了是不是，关于混入还有比较多的特性，后面再具体来剖析。
2.3导入：基于混入的模式，当在一个less文件中存在比较多的混入引入模式，又或者比较多的混入可以在多个less中重复引用，这时候就可以用一个独立的less文件来抽离这些混入模式，然后再将这个公共的less文件导入到各个依赖的less中，这也就实现了less的模块化。通过下面这个border实现三角形示例演示导入：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet/less" href="trangleStyle.less"> 9 </head> 10 <body> 11 <div class="wrapper"> 12 <div class="box"></div> 13 </div> 14 <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> 15 </body> 16 </html>
1 .trangle(T,@width,@color){ 2 width: 0; 3 height: 0; 4 border-width: @width; 5 border-style: solid; 6 border-color:@color transparent transparent transparent; 7 border-bottom-width: 0; 8 } 9 .trangle(R,@width,@color){ 10 width: 0; 11 height: 0; 12 border-width: @width; 13 border-style: solid; 14 border-color:transparent @color transparent transparent; 15 border-left-width: 0; 16 } 17 .trangle(B,@width,@color){ 18 width: 0; 19 height: 0; 20 border-width: @width; 21 border-style: solid; 22 border-color:transparent transparent @color transparent; 23 border-top-width: 0; 24 } 25 .trangle(L,@width,@color){ 26 width: 0; 27 height: 0; 28 border-width: @width; 29 border-style: solid; 30 border-color:transparent transparent transparent @color; 31 border-right-width: 0; 32 }
重点来看这个主入口less代码：通过@import引入外部less
1 *{ 2 padding: 0; 3 margin: 0; 4 @width:300px; 5 @color:red; 6 @import url(./trangle.less);//也可以采用字符串写法：@import './trangle.less' 7 body{ 8 .wrapper{ 9 position: absolute; 10 width: @width; 11 height: @width; 12 top: 50%; 13 left: 50%; 14 margin-top: -@width/2; 15 margin-left: -@width/2; 16 .box{ 17 .trangle(R,@width/2,@color); 18 } 19 } 20 } 21 }
可以通过切换trangle混入模块的第一个参数，来实现引入不同的样式，通常这个参数再less混入中被称为标识符。
关于less的详细特性后面会有博客剖析。