Less

1、CSS的缺点

标记性语言，毫无逻辑，浏览器兼容问题

2、预处理语言

Sass

Less

扩充了CSS，增加了变量，混合，函数等功能

Stylus

3、Less介绍

Less扩充了CSS语言，增加了诸如变量、混合(mixin)、运算、函数等功能。Less既可以运行在服务器端 (Node.js和Rhino平台)也可以运行在客户端（浏览器）。

4、Less使用

4.1 注释
1
2
3
//这样的注释不会出现在CSS文件中

/* 这样的会出现在CSS文件中*/
4.2 变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
//使用@创造变量
@color: green;
@width: 100px;

//选择器变量
@mySelect: #warp;
@{mySelect}{
  
}
@warp: warp;
.@{warp}{
  
}

//属性变量
@boderStyle: border-style;
@Soild: soild;
@{mySelect}{
  @{boderStyle}: @Soild;
}

//url变量
@images:"./img";
body{
  background: url("@{images}/car.jpg");
}

//声明变量
@background: {background: red};

body{
  @background();
}

//变量运算
// 加减法时，以第一个数据单位为主
// 乘除法时，注意单位统一
// 在连接运算时注意增加空格
@width:300px;
body{
  width: @width - 20;
}

//变量作用域
// 就近原则
@var: @a;
@a: 100%;
body{
  width: @var;
  @a: 9%;
}
//答案 width为9%

//变量定义变量
@var: @a;


4.3 less嵌套
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//&的妙用
//&代表父级结构

.center{
  width: 100px;
  height: 100px;
  background: red;
  //可以简化&
  & #list{
    	
    	li{
      
    	}
  	}
}

//媒体查询
#main{
  @media screen{
    @media (max-width: 768px){
      width: 100px;
    }
  }
}

4.4 混合方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//无参数方法
.card(){
  width:100px;
}
#warp{
  .card();
}

//默认参数方法
.border(@a:10px, @b: 50px){
  border:solid @a @b;
  //@arguments指代全部参数
  margin: @arguments;
}

//方法的匹配模式
// 与面向对象的多态很像，招参数匹配上最多的
@- 负责匹配

// 方法的命名空间
#card(){
  background:red;
  .d(@w:300px){
    width:@w;
    .a(@h: 300px){
      height: @h;
    }
  }
}
//父级方法不需要加括号
// > 选择的是儿子元素
#warp{
  #card > .d > #a(100px);
}

//方法的条件筛选
//when  
//and 为 &&
//not 为 ！
// ， 为 ｜｜

//数量不定的参数
// ...
#card(@a, ...){
  text-shadow: @arguments;
}

//!important


//循环方法 （使用递归）

//属性拼接
// + 为，
// +_ 为空格



4.5 继承
4.6 导入
1
2
3
4
5
6
7
8
9
10
@import "nav.less";

//导入但不编译
@import (reference) "a.less";

//相同的文件只被导入一次，随后文件的重复代码不会解析
@import (once) "a.less";

//允许导入多个同名文件
@import (multiple) "a.less";
4.7 函数