概述
Less 只对 CSS 语言做了一些方便的补充。其文件后缀为 .less
使用
变量
1
2
3
4
5
6
7
|
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
|
嵌套
普通嵌套
1
2
3
4
5
6
7
8
9
|
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
|
与原生的下文一致：
1
2
3
4
5
6
7
8
9
|
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
|
媒体选择器的嵌套
1
2
3
4
5
6
7
8
9
10
11
12
|
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
|
参考
【1】[Less.js 中文网 (lesscss.cn)](文献地址)