学习less
# css的预处理语言，可以理解成是对css的一层封装，但最终less代码还是要编译成css，浏览器不认识less。
使用less的方法
- 直接引用less文件，并且引入less.min.js文件做编译
- 借助一下工具将less转为css
- 使用node进行编译 首先安装node install -g less@latest，然后使用lessc命令对less文件编译
# less嵌套写法 嵌套
nav{
height:500px;
.content{
width:1200px;
height:600px;
margin:0 auto;
a{
color:#fee;
&:hover{
color:#e33;
}
}
.left{
float:left;
}
.right{
float:right;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# less的变量
变量允许定义一套通用的样式，在需要的时候直接调用变量，以便后期做调整修改 @width:12px; .border{ width:@width; }
# 混合，可以把定义好的classA应用到classB上
.classA{
border:1px solid #eee;
}
.classB{
.classA
}
1
2
3
4
5
6
2
3
4
5
6
清除浮动样式的混合使用
.clearFix{
*zoom:1;
&:after{
content:'';
display:block;
clear:both;
}
}
.classA{
.clearFix
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
带参数的混合
.border(@color){
border:1px solid @color;
}
.box1{
.border(#f33);
}
.box2{
.border(#33f);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
带默认值的参数混合
.border(@width:1px,@style:solid){
border:@width @style #033;
}
.box1{
.border(2px);
}
.box2{
.border();
}
.box3{
.border(1px,dotted)
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
根据不同模式的匹配混合
.border(top,@width:1px){
border-top:@width solid #333;
}
.border(left,@width:1px){
border-left:@width solid #333;
}
.box1{
.border(top);
}
.box2{
.border(left,2px)
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# less文件的互相调用
@import "global.less"
1
# less避免编译
@rem:32rem;
.box{
width:@rem;
font:(12/@rem)~'/'(24/@rem) '宋体'
}
1
2
3
4
5
2
3
4
5
编辑 (opens new window)
上次更新: 2024/12/28, 08:35:49