CSS(层叠样式表)是一项出色的技术作为一门标记性语言,CSS 的先天性优点是语法相对简单,对使用者的要求较低,但它的致命弱点是需要书写大量看似没有逻辑的代码不方便维护及扩展,不利于复用。造成这一现象的很大原因在于CSS是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。Less的出现,为Web开发者带来了福音,它是一门CSS预处理语言,引入了变量、运算、函数、继承等功能,为CSS语言赋予了动态语言的特性。Less大大简化了CSS的编写,并且降低了CSS的维护成本。就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情

语法

1.注释

1
2
3
// 单行注释  不会编译到css中

/* 多行注释 会编译到css中 */

2.变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 语法: @变量名: 值
@white: #fff;
@bgColor: #ccc;
@fontSize: 22px;
// 多值变量
@normalSize: 20px 30px 40px 50px;

body {
background-color:@bgColor;
}

main {
color: @bgColor;
background-color: @white;
font-size:@fontSize;
padding:@normalSize;
}
aside {
font-size:@fontSize;
margin:@normalSize;
}

3.嵌套(尽量不要嵌套超过三层)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
h1 {
font-size: 25px;
color: #e45456;
}
p {
font-size: 25px;
color: #3c7949;
}

.myclass {
h1 {
font-size: 25px;
color: #e45456;
}
p {
font-size: 25px;
color: #3c7949;
}
}
}
  1. 父选择器符号(&) 直接子选则器符号(>)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .container {
    > h1 {
    font-size: 25px;
    color: #e45456;
    }
    > p {
    font-size: 25px;
    color: #3c7949;
    }

    .myclass {
    h1 {
    font-size: 25px;
    color: #e45456;
    }
    p {
    font-size: 25px;
    color: #3c7949;
    }
    }
    }

5.四则运算

1
2
3
4
.box {
width: 20px*3 + 10;
height: 30px/3-2;
}

6.函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.effect(@normal:yellow, @hover:orange, @visited:darkorange, @active:green) {
color: @normal;

&:hover {
color: @hover;
}

&:visited {
color: @visited;
}

&:active {
color: @active;
}
}

a {
// .effect(red,green,blue,black);
.effect()
}

.box {
.effect(pink,hotpink,lightpink,white);
}

7.导入

1
2
不同的功能 要把这些代码放到不同的文件中
格式: @import "src"

8.继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
aside {
font-size:24px;
margin:20px 30px 40px 50px;
border:1px solid #ccc;
}

main {

color:#ccc;
background-color:#fff;
// font-size:24px;
// padding:20px 30px 40px 50px;
&:extend(aside);

border:none;
}