文章目录
  1. 1. less的安装
  2. 2. 编译
  3. 3. less的语法
  4. 4. 转义成相对应的css文件

基本上我们真正的在企业开发中不会直接写css这种样式的,而是通过less或者sass等来编写css,然后通过相关的环境进行转义成css代码,那么肯定有人会问为什么要用less或者其他的来编写css,现在由我来描述一下

less的安装

  • 1.须要先下载node.js可以去官网下载node.js
  • 2.打开控制台,输入cmd,当然也可以使用快捷键window+r可以直接调出控制台
  • 3.在控制台输入npm install -g less 便可以在线自动安装了
  • 4.lessc -v 可以检测你的less是否安装成功

编译

  • 第一种方法:在cmd中输入lessc style.less style.css就可编译成tyle.css文件
  • 第二种方法:打开webstrom找到设置->工具集->File watchers->找到右上角的+这个符号点击它,然后会看到一个less的文件,点击它,会弹出一个less的窗口,如果你前面的less安装好了的话,他会自动帮你找到你less转义的文件配置,这个配置是前面安装的时候下载的文件,如果不出意外的话,应该是可以了的

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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/*@import "要导入文件的路径,这里可以是less和css";*/
/*变量 @变量:值;这是个全局的变量在这个less的文件中都可以使用*/
@color:red;
div{
color:@color;
}
a{
color:@color;
}
/*less的混入编写*/
/*.addRadius{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}*/
/*这种的写法是最常用的写法,注意我的默认值是10px,注意这个必须要有默认值*/
.addRadius(@r:10px){
-webkit-border-radius:@r;
-moz-border-radius:@r;
border-radius:@r;
}
.aa{
.addRadius;
}
.bb{
width:100px;
/*这样写他会默认是10px*/
/*.addRadius();*/
.addRadius(5px);
}
/*嵌套编写这是用的最多的*/
/*我们常用的写法是这样的*/
.header{
width: 100px;
}
.header>div{
width: 50px;
height:30px;
}
.header>div>h2{
font-size:20px;
}
.header>div>a:hover{
color: #000;
}
/*我们可以看到这种写法是真的不是非常的好,重复的代码次数太多了*/
/*我现在开始用嵌套的形式来写*/
.header{
width:100%;
height:100px;
>div{
width: 50px;
height:30px;
.addRadius();
>h2{
font-size:20px;
}
>a{
color: #000;
/*这是伪元素的写法,注意它前面的&表示的是去除空格的意思*/
&:hover{
color:red;
}
}
}
ul{
width:100px;
}
+ .div{
height:100px;
}
>.class,.befie{
background: #000;
}
}

转义成相对应的css文件

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/*less的语法使用*/
/*变量 @变量:值;*/
div {
color: red;
}
a {
color: red;
}
/*less的混入编写*/
/*.addRadius{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}*/
/*这种的写法是最常用的写法,注意我的默认值是10px,注意这个必须要有默认值*/
.aa {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bb {
width: 100px;
/*这样写他会默认是10px*/
/*.addRadius();*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/*嵌套编写这是用的最多的*/
/*我们常用的写法是这样的*/
.header {
width: 100px;
}
.header > div {
width: 50px;
height: 30px;
}
.header > div > h2 {
font-size: 20px;
}
.header > div > a:hover {
color: #000;
}
/*我们可以看到这种写法是真的不是非常的好,重复的代码次数太多了*/
/*我现在开始用嵌套的形式来写*/
.header {
width: 100%;
height: 100px;
}
.header > div {
width: 50px;
height: 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.header > div > h2 {
font-size: 20px;
}
.header > div > a {
color: #000;
/*这是伪元素的写法,注意它前面的&表示的是去除空格的意思*/
}
.header > div > a:hover {
color: red;
}
.header ul {
width: 100px;
}
.header + .div {
height: 100px;
}
.header > .class, .header .befie {
background: #000;
}
文章目录
  1. 1. less的安装
  2. 2. 编译
  3. 3. less的语法
  4. 4. 转义成相对应的css文件