CSS模块化：less

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" />

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <link rel="stylesheet/less" type="text/css" href="demo.less" />

 </head>

 <body>

     <div class="wrapper">

         <div class="box">

             <ul>

                 <li><a href="">aaaa</a></li>

                 <li><a href="">aaaa</a></li>

                 <li><a href="">aaaa</a></li>

                 <li><a href="">aaaa</a></li>

                 <li><a href="">aaaa</a></li>

             </ul>

         </div>

     </div>

     <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

 </body>

 </html>

测试结构代码

 *{

     margin:;

     padding:;

     list-style: none;

     text-decoration: none;

     body{

         background-color: #ccc;

         .wrapper{

             position: relative;

             width: 500px;

             height: 500px;

             margin:200px auto;

             border: 1px solid #000;

             .box{

                 position: absolute;

                 width: 200px;

                 height: 200px;

                 top: 50%;

                 left: 50%;

                 margin-top: -100px;

                 margin-left: -100px;

                 border:1px solid #000;

             }

         }

     }

 }

测试的Less样式表

注意本地测试时需要放到本地服务下，在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文件的代码如下;

 * {

   margin:;

   padding:;

   list-style: none;

   text-decoration: none;

 }

 * body {

   background-color: #ccc;

 }

 * body .wrapper {

   position: relative;

   width: 500px;

   height: 500px;

   margin: 200px auto;

   border: 1px solid #000;

 }

 * body .wrapper .box {

   position: absolute;

   width: 200px;

   height: 200px;

   top: 50%;

   left: 50%;

   margin-top: -100px;

   margin-left: -100px;

   border: 1px solid #000;

 }

注：在webpack中使用less会在后期的webpack相关博客中解析。

三、less的语法及特性

1.注释编译：less中的双斜杠注释不会被编译到css文件中，但是包裹注释会被编译到css文件中

// 双斜杠注释不会被编译到css文件中

/*我可以出现在css文件中*/

编译后的结果：

/*我可以出现在css文件中*/

2.变量与运算

 @ince-blue:#5B83AD;

 @light-blue:@ince-blue + #ff0;

 //@light-blue的实际颜色是由@ince-blue + #ff0得到的，实际颜色值是#ffffad

 //在less中直接将变量应用到样式中

 background-color:@light-blue;

可以运算的值当然还有像素值：

@list-width:300px;

@list-height:@list-width * 2;

2.1.变量也可以说是可变插值，上面的示例中展示的都是使用变量来控制CSS样式值，less中的变量除了可以控制css样式值以外，还可以被用作选择器名称、属性名称、URL和@import语句。

2.1.1.变量控制选择器

 @my-selector:banner;

 .@{my-selector}{

         // 这里是类选择器banner的具体的样式

 }

2.1.2.变量控制网址（URL）

 @images: "../img";

 div{

     background: url("@{imges}/mei.png");

 }

2.1.3.变量与导入语句

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less"

2.1.4.变量与属性

@property-color:color;

span{

    @{property-color}: #0ee;

}

2.1.5.变量与变量名

 @fnord: "I am fnord.";

 @var: 'fnord';

 content: @@var;

 //编译为

 content: "I am fnord.";

2.1.6.变量的作用域与延迟加载

 body{

     div{

         @size:14px;

         .p1{

             @size:18px;

             font-size:@size;

         }

         ul{

             font-size:@size;

         }

         .p2{

             font-size:@size;

         }

     }

 }

less作用域类似JS的块级作用域，当前作用域有该变量就取当前作用域的变量值。当前作用域没有的话就取沿着作用域链往外层作用域匹配。

2.1.6.1.但是要注意的是，这并不能说明less的变量作用域就完全与JS的作用域相同，恰恰相反它们有很大的区别。比如延迟加载：

 div{

     @col-p:#ffo;

     p{

         color:@col-p;

         @col-p:#000;

     }

 }

 //编译结果

 div p{

     color:#000;

 }

2.1.6.2.这种延迟加载还存在作用域上，例如下面这种情况：

 //情况以

 .lazy-eval {

   width: @var;

 }

 @var: @a;

 @a: 9%;

 //情况二

 .lazy-eval-scope {

   width: @var;

   @a: 9%;

 }

 @var: @a;

 @a: 100%;

以上这两种情况都编译成下面这css代码：

.lazy-eval-scope {

  width: 9%;

}

2.1.6.3.如果出现当前作用域和外层作用域的延迟加载问题时，当前作用域有该变量直接使用当前作用域的，没有当前作用域的话使用外层作用域的变量。

2.2混入：从一个规则集引入到另一个规则集的方式。

在CSS代码中经常会出现比较多的重复的代码，但是在原生的CSS中没有太好的方法可以解决，当然也不是没有，比如使用单独的类名抽离，但是这带来了HTML文件中的class属性值会增加很多，在Less中采用了混合的语法解决了这个问题。

 .border{

     border:1px solid #000;

 }

 div{

     .border;//引入边框样式

 }

示例中的混合写法，在引用时采用了简写方式，大家第一眼这代码是不是特别像类的选择器写法，其实不然，less标准的混合引入是要在后面带小括号的，所以示例中的标准写法是“.border()”。这一种简写和一种标准写法都没什么差别，具体遵循自己的开发文档的标准或者个人习惯就好。

看到这个引入方式是不是有了一些启发呢？既然引入标准语法是可以带小括号，这个小括号就不是随便放在那里的，而是有一定的实际意义。这个实际意义就是混入可以理解为JS中的方法，在定义的时候可以定义形参，然后在引用的时候传入实参：

 .border(@width,@color){

     border:@width solid @color;

 }

 div{

     .border(1px,#000);

 }

还可以使用默认值定义混入规则：

 .border(@width:1px,@color:#000){

     border:@widht solid @color;

 }

 div{

     .border;

 }

这个看上去比JS更强大了是不是，关于混入还有比较多的特性，后面再具体来剖析。

2.3导入：基于混入的模式，当在一个less文件中存在比较多的混入引入模式，又或者比较多的混入可以在多个less中重复引用，这时候就可以用一个独立的less文件来抽离这些混入模式，然后再将这个公共的less文件导入到各个依赖的less中，这也就实现了less的模块化。通过下面这个border实现三角形示例演示导入：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <link rel="stylesheet/less" href="trangleStyle.less">

 </head>

 <body>

     <div class="wrapper">

         <div class="box"></div>

     </div>

     <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

 </body>

 </html>

HTML结构代码

 .trangle(T,@width,@color){

     width: 0;

     height: 0;

     border-width: @width;

     border-style: solid;

     border-color:@color transparent transparent transparent;

     border-bottom-width: 0;

 }

 .trangle(R,@width,@color){

     width: 0;

     height: 0;

     border-width: @width;

     border-style: solid;

     border-color:transparent @color transparent transparent;

     border-left-width: 0;

 }

 .trangle(B,@width,@color){

     width: 0;

     height: 0;

     border-width: @width;

     border-style: solid;

     border-color:transparent transparent @color transparent;

     border-top-width: 0;

 }

 .trangle(L,@width,@color){

     width: 0;

     height: 0;

     border-width: @width;

     border-style: solid;

     border-color:transparent transparent transparent @color;

     border-right-width: 0;

 }

less依赖模块

重点来看这个主入口less代码：通过@import引入外部less

 *{

     padding:;

     margin:;

     @width:300px;

     @color:red;

     @import url(./trangle.less);//也可以采用字符串写法：@import './trangle.less'

     body{

         .wrapper{

             position: absolute;

             width: @width;

             height: @width;

             top: 50%;

             left: 50%;

             margin-top: -@width/2;

             margin-left: -@width/2;

             .box{

                 .trangle(R,@width/2,@color);

             }

         }

     }

 }

可以通过切换trangle混入模块的第一个参数，来实现引入不同的样式，通常这个参数再less混入中被称为标识符。

关于less的详细特性后面会有博客剖析。