目录
前言
示例
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
| @import "../../assets/less/common";
.countDownAd {
&:extend(.flexLayout);
padding: 30rem / @font-size-base;
box-sizing: border-box;
background-color: #fff;
.content {
flex: 1;
.title {
&:extend(.oneLineFormatEllipsis);
width: 100%;
height: 40rem / @font-size-base;
margin: 10rem / @font-size-base 0 0 0;
color: #444;
font-family: @font-family-base;
font-weight: bold;
font-size: 20px;
[data-dpr="2"] & {
font-size: 40px;
}
[data-dpr="3"] & {
font-size: 60px;
}
}
.subtitle {
&:extend(.oneLineFormatEllipsis);
width: 100%;
height: 26rem / @font-size-base;
margin: 14rem / @font-size-base 0 0 0;
color: #999;
font-family: @font-family-base;
font-size: 13px;
[data-dpr="2"] & {
font-size: 26px;
}
[data-dpr="3"] & {
font-size: 39px;
}
}
}
.thumb {
display: block;
width: 240rem / @font-size-base;
height: 180rem / @font-size-base;
margin-left: 50rem / @font-size-base;
}
}
|
对应效果
解释
1.使用less可以依据DOM结构进行嵌套声明，如.countDownAd和.content的关系
2.@import “../../assets/less/common”;是ES6的写法，表明引入依赖的公共基础样式common.less
3.&:extend(.flexLayout);表示继承，继承的是公共基础样式common.less的样式
4.@font-size-base表示变量，可以在多个地方使用，这样一旦要修改就可以只改动一个地方。