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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
.loop(@n, @i:1) when (@i <= @n) {
@val: unit(@i * 4, px);
.p-@{i} {
padding: @val;
}
.px-@{i} {
padding-left: @val;
padding-right: @val;
}
.py-@{i} {
padding-top: @val;
padding-bottom: @val;
}
.pt-@{i} {
padding-top: @val;
}
.pr-@{i} {
padding-right: @val;
}
.pb-@{i} {
padding-bottom: @val;
}
.pl-@{i} {
padding-left: @val;
}
.m-@{i} {
margin: @val;
}
.mx-@{i} {
margin-left: @val;
margin-right: @val;
}
.my-@{i} {
margin-top: @val;
margin-bottom: @val;
}
.mt-@{i} {
margin-top: @val;
}
.mr-@{i} {
margin-right: @val;
}
.mb-@{i} {
margin-bottom: @val;
}
.ml-@{i} {
margin-left: @val;
}
.loop(@n, (@i + 1))
}
// 预设 内外边距
.loop(5);
// 弹性盒
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-y-2\.5 { row-gap: 10px; }
.gap-x-2\.5 { column-gap: 10px; }
// 宽高
.w-full { width: 100%; }
.w-1\/5 { width: 20%; }
.w-1\/4 { width: 25%; }
.w-1\/3 { width: 33.3%; }
.w-1\/2 { width: 50%; }
.h-full { height: 100%; }
.min-h-0 { min-height: 0px; }
// 字体大小
.text-16 { font-size: 16px; }
.text-14 { font-size: 14px; }
.text-12 { font-size: 12px; }
.text-start { text-align: start; }
.text-center { text-align: center; }
.text-end { text-align: end; }
.text-black { color: #000; }
.text-red { color: #FF4D4F; }
.text-primary { color: var(--van-primary-color); }
.font-semibold { font-weight: 600; }
// 文字省略
.text-ellipsis {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
// 换行
.text-wrap {
// text-wrap: wrap;
word-break: break-all;
}
// 位置
.relative { position: relative; }
// 下划线
.underline { text-decoration-line: underline; }
// 垂直对齐
.align-middle { vertical-align: middle; }
// 溢出
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }