背景
项目中总是遇到class取名难，样式到处定义，重复颜色到处写，代码切换烦得一批
一.dart-sass，node-sass
使用dart-sass，废弃node-sass
二.Vue项目中色板的使用
在全局css文件中，新建一个文件，放置各种scss变量
例如：
src/styles/variables.scss
1
| $moedu-background-color: #F5F7FA;
|
配置vue.config.js,将整个变量文件注入
1
2
3
4
5
6
7
8
9
10
11
12
|
module.exports = {
css: {
loaderOptions: {
scss:{
additionalData: '@import "@/styles/variables.scss";'
}
}
},
}
|
在任意vue文件中，可直接使用$moedu-background-color变量，无需引入
1
2
3
4
5
6
7
8
9
10
11
12
| <template>
<div class="main">
<p>123<p>
<p>456<p>
</div>
</template>
<style lang="scss" scoped>
.main{
background-color: $moedu-background-color;
}
</style>
|
三.定义布局class
有的时候，页面只是为了写一些布局，需要专门定义一个class名，非常费事
例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<div class="main">
<p>123<p>
<p>456<p>
</div>
</template>
<style lang="scss" scoped>
.main{
display:flex;
flex:1;
flex-direction: column;
}
</style>
|
如果写好一些共用的
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
| .flex {
display: flex;
}
.flex1 {
flex: 1;
}
.row {
flex-direction: row;
}
.column {
flex-direction: column;
}
.justify-content-center {
justify-content: center;
}
.justify-content-flex-end {
justify-content: flex-end;
}
.justify-content-flex-start {
justify-content: flex-start;
}
.justify-content-space-between {
justify-content: space-between;
}
.align-items-center {
align-items: center;
}
.align-items-baseline {
align-items: baseline;
}
.align-items-flex-start {
align-items: flex-start;
}
.align-items-flex-end {
align-items: flex-end;
}
|
则可以改成
1
2
3
4
5
6
7
8
9
10
| <template>
<div class="flex flex1 flex-direction-column">
<p>123<p>
<p>456<p>
</div>
</template>
<style lang="scss" scoped>
</style>
|
四.烦人的margin与padding
同上述，marigin与padding经常性要定义class去写，烦得一批，相同的要定义很多次
例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <template>
<div class="flex flex1 flex-direction-column">
<p class="p1">123<p>
<p class="p2">456<p>
</div>
</template>
<style lang="scss" scoped>
.p1{
margin-top:20px;
}
.p2{
margin-top:30px;
}
</style>
|
我们通过一些函数，生成这些东西
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
|
$margins: (4,8,10,16,24);
@for $i from 1 through length($margins) {
$item: nth($margins, $i);
.margin-#{$item}{
margin: #{$item}px;
}
.margin-left-#{$item} {
margin-left: #{$item}px;
}
.margin-top-#{$item} {
margin-top: #{$item}px;
}
.margin-bottom-#{$item} {
margin-bottom: #{$item}px;
}
.margin-right-#{$item} {
margin-right: #{$item}px;
}
.padding-#{$item}{
padding: #{$item}px;
}
.padding-left-#{$item} {
padding-left: #{$item}px;
}
.padding-top-#{$item} {
padding-top: #{$item}px;
}
.padding-bottom-#{$item} {
padding-bottom: #{$item}px;
}
.padding-right-#{$item} {
padding-right: #{$item}px;
}
}
|
则可以修改为
1
2
3
4
5
6
| <template>
<div class="flex flex1 flex-direction-column">
<p class="margin-top-20">123<p>
<p class="margin-top-30">456<p>
</div>
</template>
|
有点tailwindcss的味道
五.hex透明度
颜色大家肯定喜欢写十六进制的#ff6347，没有人喜欢写rgb(255,99,71)吧
但是有时候遇到透明度要设置，看很多同学就不知道hex怎么加了，都纷纷使用rgb(255,99,71,0.1)
其实hex可以直接加透明度
例如rgb(255,99,71,0.1)，可以直接写成#ff63471A
透明度表格如下
| Alpha % |
Hex |
Num |
| 100% |
FF |
255 |
| 99% |
FC |
252 |
| 98% |
FA |
250 |
| 97% |
F7 |
247 |
| 96% |
F5 |
245 |
| 95% |
F2 |
242 |
| 94% |
F0 |
240 |
| 93% |
ED |
237 |
| 92% |
EB |
235 |
| 91% |
E8 |
232 |
| 90% |
E6 |
230 |
| 89% |
E3 |
227 |
| 88% |
E0 |
224 |
| 87% |
DE |
222 |
| 86% |
DB |
219 |
| 85% |
D9 |
217 |
| 84% |
D6 |
214 |
| 83% |
D4 |
212 |
| 82% |
D1 |
209 |
| 81% |
CF |
207 |
| 80% |
CC |
204 |
| 79% |
C9 |
201 |
| 78% |
C7 |
199 |
| 77% |
C4 |
196 |
| 76% |
C2 |
194 |
| 75% |
BF |
191 |
| 74% |
BD |
189 |
| 73% |
BA |
186 |
| 72% |
B8 |
184 |
| 71% |
B5 |
181 |
| 70% |
B3 |
179 |
| 69% |
B0 |
176 |
| 68% |
AD |
173 |
| 67% |
AB |
171 |
| 66% |
A8 |
168 |
| 65% |
A6 |
166 |
| 64% |
A3 |
163 |
| 63% |
A1 |
161 |
| 62% |
9E |
158 |
| 61% |
9C |
156 |
| 60% |
99 |
153 |
| 59% |
96 |
150 |
| 58% |
94 |
148 |
| 57% |
91 |
145 |
| 56% |
8F |
143 |
| 55% |
8C |
140 |
| 54% |
8A |
138 |
| 53% |
87 |
135 |
| 52% |
85 |
133 |
| 51% |
82 |
130 |
| 50% |
80 |
128 |
| 49% |
7D |
125 |
| 48% |
7A |
122 |
| 47% |
78 |
120 |
| 46% |
75 |
117 |
| 45% |
73 |
115 |
| 44% |
70 |
112 |
| 43% |
6E |
110 |
| 42% |
6B |
107 |
| 41% |
69 |
105 |
| 40% |
66 |
102 |
| 39% |
63 |
99 |
| 38% |
61 |
97 |
| 37% |
5E |
94 |
| 36% |
5C |
92 |
| 35% |
59 |
89 |
| 34% |
57 |
87 |
| 33% |
54 |
84 |
| 32% |
52 |
82 |
| 31% |
4F |
79 |
| 30% |
4D |
77 |
| 29% |
4A |
74 |
| 28% |
47 |
71 |
| 27% |
45 |
69 |
| 26% |
42 |
66 |
| 25% |
40 |
64 |
| 24% |
3D |
61 |
| 23% |
3B |
59 |
| 22% |
38 |
56 |
| 21% |
36 |
54 |
| 20% |
33 |
51 |
| 19% |
30 |
48 |
| 18% |
2E |
46 |
| 17% |
2B |
43 |
| 16% |
29 |
41 |
| 15% |
26 |
38 |
| 14% |
24 |
36 |
| 13% |
21 |
33 |
| 12% |
1F |
31 |
| 11% |
1C |
28 |
| 10% |
1A |
26 |
| 9% |
17 |
23 |
| 8% |
14 |
20 |
| 7% |
12 |
18 |
| 6% |
0F |
15 |
| 5% |
0D |
13 |
| 4% |
0A |
10 |
| 3% |
08 |
8 |
| 2% |
05 |
5 |
| 1% |
03 |
3 |
| 0% |
00 |
0 |
