背景

项目中总是遇到class取名难，样式到处定义，重复颜色到处写，代码切换烦得一批

一.dart-sass，node-sass

使用dart-sass，废弃node-sass

二.Vue项目中色板的使用

在全局css文件中，新建一个文件，放置各种scss变量

例如：

src/styles/variables.scss

$moedu-background-color: #F5F7FA;

配置vue.config.js,将整个变量文件注入

//vue.config.js
module.exports = {
  // …………省略其他配置
  css: {
    loaderOptions: {
      scss:{
        additionalData: '@import "@/styles/variables.scss";'
      }
    }
  },
}

在任意vue文件中，可直接使用$moedu-background-color变量，无需引入

<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名，非常费事

例如

<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>

如果写好一些共用的

.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;
}

则可以改成

<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去写，烦得一批，相同的要定义很多次

例如：

<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>

我们通过一些函数，生成这些东西

// 填写需要的边距
$margins: (4,8,10,16,24);

@for $i from 1 through length($margins) {
  $item: nth($margins, $i);
  // .w#{$item}px {
  //   width: #{$item}px;
  // }
  .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;
  }
  
}

则可以修改为

<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