less

1 介绍

less是一个css预编译语言
	可以解决css无法复用样式，权重问题，无法计算，无法使用语句，没有方法，单位转换等等问题
Github:http://github.com/less/less
官网：http://lesscss.org/
中文官网：http://lesscss.cn/

2 编译less

安装less
	npm install less -g
	npm install less --save-dev
	此时得到一个全局的lessc指令，可以通过lessc -v查看版本号
	浏览器不认识less语言，所以我们要将less编译成css
	lessc编译less:  lessc ./demo.less ./demo.css
webpack编译
	在webpack看来，less文件也是资源，因此也可以模块化加载
	要安装less加载机less-loader,less文件默认扩展名是.less
		匹配less文件：test: /\.less$/
	由于less最终编译成css，因此也需要css加载机：rules: 'style-loader!css-loader!less-loader'

3 嵌套套语法与&

嵌套式语法
	使用预编译语言最大的特点就是可以使用嵌套式语法，也就是说直接在一个选择器中使用另一个选择器并书写样式
	编译的时候会将内外选择器同时保留
		外部选择器类似命名空间，确保选择器名称不会相互覆盖
	嵌套的时候，我们可以通过&符号获取当前选择器

div {
    // 使用嵌套语法
    p {
        color: red;
        font-size: 30px;
    }
    a {
        color: green;
        font-size: 30px;
        text-decoration: none;
    }
    // 通过&符号获取当前选择器
    &:hover {
    	color: red;
    }
}

4 变量

less支持变量，定义的语法跟js语法相似
	@key: value;
		@相当于var，是变量的标志
		key表示变量名称（符合js变量命名规范）
		:相当于赋值符号
		value表示值
		;表示语句结束

// 定义变量
// @color: #fff;
// @bg: #00f;
// @space: 20px;
@color: #f00;
@bg: #00f;
@space: 40px;

// 写样式
div {
    // 可以使用运算
    padding: @space/2  @space*1.5;
    font-size: @space;
    background: @bg;
    span {
        color: @color;
        margin: 0 @space/2;
    }
}

5 运算

less支持数学运算，并且会做单位转换
	加减法：保留第一个加数或者被减数的单位
	乘法：保留第一个乘数的单位
	除法：保留第一个单位

6 混合

混合的作用就是为了复用选择器的样式
在less中，支持两类混合：类混合和id混合
	定义混合：定义这些选择器
	使用混合：直接写这些选择器
在选择器内部使用混合的时候，想覆盖继承下来的样式一定要注意选择器的权重
less中的混合在编译的时候保留（变量会删除），混合继承的样式不会合并选择器

// 变量在编译的时候会删除，混合在编译的时候会保留
.box1 {
    background-color: pink;
    .text {
        color: red;
        font-size: 30px;
    }
    #demo {
        color: green;
        font-size: 40px;
    }
    a {
        color: gold;
        font-size: 40px;
    }
}
// 利用混合技术，复用样式
.box2 {
    // 直接写选择器,等价于将box1中的样式再写一遍
    // .box1;

    // 复用某些样式
    // 给box2中的text复用box1中的text样式
    .text {
        .box1 .text;
    }

    // 还可以重写样式
    // 一定要注意选择器的权重
    .text,
    #demo {
        color: yellowgreen;
    }


    // 标签名选择器不能作为混合使用
}

7 方法

方法跟混合一样，都是为了复用选择器的样式
	混合在编译的时候会保留
	方法在编译的时候会删除
如果想要将复用放入眼视光hi，在编译的时候删除，我们可以使用方法
如果复用的样式是可变的，我们可以使用方法

定义方法的语法跟js中定义方法的语法类似
	.方法名称(@arg1, @arg2) {
		// 定义样式
	}
	
	.相当于function用来定义方法
	方法名称跟js中方法命名规范一致（但less可以使用-）
	()表示参数集合，可以定义参数
	@arg1, @arg2表示参数
	{}表示方法体，我们可以定义样式

使用方法：.方法名称(arg1, arg2);
默认参数：.方法名称(@arg: value, @arg2: value2) {}
	定义默认参数的语法跟定义变量的语法类似
		如果定义了默认参数，使用方法的时候，可以不传递参数
		如果没有定义默认参数，使用方法的时候，必须传递参数
获取所有参数：我们可以通过@arguments获取所有的参数
!important:如果对方法使用!important关键字，此时方法中的每一个样式都会提高权重

// 引入文件
// @import url(./base.less);
// 封装在方法中
// 让元素设置宽度并居中
// .wcenter(@w, @mt, @mb) {
//     width: @w;
//     margin: @mt auto @mb;
// }
// 默认参数
// .wcenter(@w: auto, @mt: 0, @mb: @mt) {
//     width: @w;
//     margin: @mt auto @mb;
// }
// // 封装方法自动添加样式前缀
// // .border-radius(@r) {
// //     -webkit-border-radius: @r;
// //     -moz-border-radius: @r;
// //     -ms-border-radius: @r;
// //     -o-border-radius: @r;
// //     border-radius: @r;
// // }
// .border-radius(@r1: 0, @r2: @r1, @r3: @r1, @r4: @r1) {
//     -webkit-border-radius: @arguments;
//     -moz-border-radius: @arguments;
//     -ms-border-radius: @arguments;
//     -o-border-radius: @arguments;
//     border-radius: @arguments;
// }

// .box1 {
//     .wcenter(800px, 50px, 20px);
//     .border-radius(20px, 40px, 80px, 100px);
//     background-color: yellowgreen;
// }
// .box2 {
//     // 省略，使用默认参数
//     .wcenter(1000px);
//     .border-radius(40px, 80px);
//     background-color: skyblue;
// }


// 插值
// @msg: '星期五';
// // 1 字符串中使用插值
// h1::after {
//     content: '今天是@{msg}';
// }

// 2 选择器上使用插值
// @num: 5;
// .box-@{num} {
//     color: red;
// }

// 3 样式属性名称上使用插值
// @dir: top;
// div {
//     border-@{dir}-color: red;
// }


// 封装制造三角形的方法
.arrow(@w: 10px, @c: #000, @dir: top) {
    border: @w solid transparent;
    border-@{dir}-color: @c;
    font-size: 0;
    width: 0;
}

// 三角形
span {
    border: 20px solid transparent;
    border-right-color: red;
    font-size: 0;
}
h1 {
    border: 30px solid transparent;
    border-top-color: green;
    width: 0;
}
strong {
    .arrow(50px, green, left);
}

8 插值，引入文件

插值语法：插值语法@{key}
	js中插值：是为了复用字符串，less中插值：为了复用样式
在less中，有三种情况下可以使用插值语法
	1 在字符串中可以使用插值
	2 在选择器上可以使用插值
	3 在样式属性名称上(key)可以使用插值
less引入文件，跟css引入文件相似，有两种方式
	1 css方式引入：@import url()
	2 直接引入：@import 地址
	被引入的文件中，之建议写方法和变量，其它的选择器会被复制多次

9 内置方法

字符串方法：e避免less编译的
数学方法：js中数学对象支持的，less也支持
	ceil向上取整, floor向下取整, round四舍五入, max, min, percentage(求百分数)
定义色彩方法：rgb, rgba, hsl(hue, saturation, lightness)
		hue色相0-360	saturation饱和度0-100%	  lightness亮度0-100%
色彩通道方法：red, green, blue, alpha, hue, saturate, lightness
色彩操作方法：fadeIn, fadeOut, fadeTo, saturate, desaturate, lighten, darken
	最小值是0，最大值是100%
色彩混合方法	softLight, hardLight

10 条件语句

less不支持if条件语句，但是我们可以通过方法来模拟：.方法名称() when() {}
	when关键字就是用来定义该方法的适用条件的
两个变形
	且条件	.方法名称() when() and () {}
	非条件	.方法名称() when not () {}
支持比较运算符（跟js一样，但是'等于'有变化）：>, >=, <, <=, =
	注意：less中的等于比较运算符用'=‘，比较的时候，不需要带单位
在js中，满足了一个条件就不会执行else后面的了
在less中，所有的方法，只要满足条件，都会执行，并且后执行的会覆盖先执行的

// div {
//     width: 1px + 2in;
//     height: e('1px + 2in');
// }
.wcenter(@w: auto, @mt: 0, @mb: @mt) {
    width: @w;
    margin: @mt auto @mb;
    background-color: red;
}
// 大于500，背景是绿色
.wcenter(@w: auto, @mt: 0, @mb: @mt) when (@w > 500) {
    width: @w;
    margin: @mt auto @mb;
    background-color: green;
}
// 200 到500之间显示金黄色
.wcenter(@w: auto, @mt: 0, @mb: @mt) when (@w >= 200) and (@w <= 500) {
    width: @w;
    margin: @mt auto @mb;
    background-color: gold;
}
// 不大于200的时候，显示粉色
.wcenter(@w: auto, @mt: 0, @mb: @mt) when not (@w > 200) {
    width: @w;
    margin: @mt auto @mb;
    background-color: pink;
}

.box1 {
    .wcenter(600px);
}
.box2 {
    .wcenter(300px);
}
.box3 {
    .wcenter(100px);
}

11 作用域

less提供了块作用域，一对{}定义了一个模块，创建一个作用域
	作用域内部的数据，外部无法访问
选择器表示该模块的名称，我们称之为命名空间
	在外面的我们称之为全局环境
	在{}内部的我们称之为局部环境
我们讨论变量，混合，方法在全局环境，以及局部环境下的使用情况
变量
	全局的变量，任何模块都能使用
	局部的变量，当前模块可以使用，其它的模块无法使用
混合
	全局的混合，任何模块都能使用
	局部的混合，当前模块可以使用，其它模块无法使用，但是可以通过命名空间使用
方法
	全局的方法，任何模块都能使用
	局部的方法，当前模块可以使用，其它模块无法直接使用，但是可以通过命名空间使用
less中的变量，混合，方法都支持声明前置，所以，我们尽量将变量，方法都定义在最前面。通常我们将他们定义在一个文件（公共模块文件，里面定义配置变量，以及工具方法）中，再引入。
如果被引入的文件中，定义了混合，会被复制多次（造成资源的浪费）

// // 全局变量
// // @color: red;
// .box1 {
//     // 局部变量，在当前作用域可以使用
//     @num: 200px;
//     color: @color;
//     width: @num;
// }
// .box2 {
//     color: @color;
// }

// // 支持声明前置
// @color: green;

// 混合
// 全局混合可以在任何位置使用
// .demo {
//     color: red;
// }

// .box1 {
//     // 局部混合，可以在当前模块下使用
//     .title {
//         font-size: 30px;
//     }
//     .demo;
//     .title;
// }
// .box2 {
//     .demo;
//     // 使用局部混合，需要添加命名空间
//     .box1 .title;
// }
// // 支持声明前置


// 方法
// 全局方法
.size() {
    width: 100px;
    height: 50px;
}
.box1 {
    // 局部的方法
    .demo() {
        font-size: 20px;
        color: red
    }
    .size();
    // 局部的方法在当前模块下使用
    .demo();
}
.box2 {
    .size();
    // 使用局部的方法，需要添加命名空间
    .box1 .demo();
}
// 支持声明前置


// 总结：
// 变量：局部变量当前模块可以使用，其它模块不能使用，支持声明前置
// 混合：局部混合当前模块可以使用，其它模块要添加命名空间，支持声明前置
// 方法：局部方法当前模块可以使用，其它模块要添加命名空间，支持声明前置

// 由于变量和方法在编译的时候会删除，因此可以放入公用文件中，引入来复用，但是混合不可以