LESS

什么是LESS？

1. Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。
2. 它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。此外，Less 可以运行在 Node 或浏览器端。
3. 一句话：用类似JS的语法去写CSS。
4. 官网：
   ① LESS官网：http://lesscss.org/
   ② LESS中文网 ：http://www.lesscss.cn/

LESS的特点？

作为CSS的一种扩展，LESS CSS不仅向下兼容CSS（可以在LESS中书写CSS，不能在CSS中书写LESS）的语法，而且连新增的特性也是使用CSS语法。这样的设置使得学习LESS非常轻松，而且你可以在任何时候回退到CSS。

如何使用？

1. 客户端直接调用
   ① 代码

   <link rel="stylesheet/less" href="less/less.less">
   <!--用于编译LESS的-->
   <script type="text/javascript" src="js/less.min.js"></script>
   <!--用于解析LESS文件-->
   

   ② 注意
   1. 必须在服务器环境中才能生效，动态编译注入虚拟DOM或者内存中，类似ajax。
   2. 开发中常用的服务器组合：WAPM
2. 预编译（提前编译）
   ① 在代码编辑器中，按照LESS的语法规则写好LESS文件；
   ② 使用编译工具把.less文件编译成.css文件；
   ③ 把编译后的css文件引入到页面即可。
   ④ 编译工具：考拉
   
   使用方法：
   1. 引入项目
   2. 新建less文件夹，在其中新建××.less
   3. 新建css文件夹
   4. 在考拉中，刷新，编译××.less
   5. css文件夹中自动生成对应css文件

核心语法

1. 变量：使用@定义变量
   ① 单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
   ② 代码

   // JS中定义变量
   var name = '张三';
   
   // LESS中定义变量
   @color:red;
   h1{
      color: @color;
   }
   

2. 嵌套
   ① 在一个选择器中嵌套另一个选择器来实现继承，这样很大程度上减少了代码量，并且代码看起来更加清晰。
   ② 代码：

    div{
      h1{
        color:red;
      }
      div{
   		h2{
   			font-size:20px;
   		}
   	}
    }
   

   ③ 注意：嵌套一般情况下，不要超过3层

3. 运算
   ① 运算提供了加、减、乘、除操作，其他复杂的运算交给函数；通常我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。
   ② 代码：

   @w:500px;
   div{
      h1{
        width: @w - 100;
      }
   }
   
   h1{
     width: @w;
     border: 1px solid #000;
   }
   

   ③ 注意：运算符与值之间必须以空格分开。

4. 混合（Mixins）：使用.定义混合
   ① 混合可以将一个定义好的class A轻松的引入到class B中，从而简单的实现class B 继承class A的所有属性。我们还可以带参数的调用，就像使用函数一样。
   ② 代码：

   .yuanjiao(@radius:5px , @rotate){
   	border-radius:@radius;
   	transform:rotate(@rotate);
   }
   h1{
   	width:300px;
   	height:100px;
   	border:1px solid #000;
   	backgroud:pink;
   	.yuanjiao(30px, 60deg);
   }
   h2{
   	width:200px;
   	height:100px;
   	border:1px solid #000;
   	.yuanjiao(40px, 80deg);
   }
   

   ③ 注意：

   1. 混合的使用就和js的自定义函数类似，首先 混合 必须前面是以 . +混合名称开始
   2. 结构：.名称(变量){}
   3. 可以有默认值，也可以没有默认值，没有的话，在调用的时候必须传参，有默认值的时候就可以不用传递参数；
   4. 多个参数之间和js一样，用逗号（,） 隔开

5. 函数
   ① LESS中的函数 - 映射了JavaScript函数代码，如果你愿意的话，可以操纵属性值。
   ② 比如：鼠标移上亮度增加20%。

   @color:#F60;
   div{
   	a{
   		font-size:30px;
   		text-decoration:none;
   		color:@color;
   		&:hover{
   			color:lighten(@color,20%)
   		}
   	}
   }
   

   ③ 查文档：

   saturate(@color, 10%); // 饱和度增加 10%
   desaturate(@color, 10%); // 饱和度降低 10%
   lighten(@color, 10%); // 亮度增加 10%
   darken(@color, 10%); // 亮度降低 10%
   fadein(@color, 10%); // 透明度增加 10%
   fadeout(@color, 10%); // 透明度降低 10%
   fade(@color, 50%); // 设定透明度为 50%
   spin(@color, 10); // 色相值增加 10
   

6. 匹配模式
   ① 类似js中的if else判断，只有匹配成功才能起作用
   ② 代码：

   .radius(t_l,@w:5px){
   	border-top-left-radius:@w;
   }
   .radius(t_r,@w:5px){
   	border-top-right-radius:@w;
   }
   .radius(t_l,@w:5px){
   	border-bottom-left-radius:@w;
   }
   .radius(t_r,@w:5px){
   	border-bottom-right-radius:@w;
   }
   div{
   	width:300px;
   	height:200px;
   	background:pink;
   	border:1px solid #000;
   	.radius(t_r,10px);
   }
   

   ③ 注意：
   匹配模式中, 定义的模式名称都是一样的，只是参数不一样，调用的时候只需选择对应的参数就可以了。

补充

1. 如何在一个LESS文件中导入另一个LESS文件？

@import "less.less"; // 注意：less文件扩展名可选

2. Else
   ① // 不会被编译器编译的注释
   ② /**/ 是可以被编译器编译的 注释
   ③ ~’ ’ 表示的是禁止被编译
   ④ & 表示选择所有的父级元素