我的GitHub

无星的小窝

估计也么的人看

0%

无星的前端之旅（二十五）—— css的一些用法

发表于 更新于 分类于 阅读次数：
本文字数： 4.5k 阅读时长 ≈ 4 分钟

背景

项目中总是遇到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
//vue.config.js
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);
  // .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;
  }
  
}

则可以修改为

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
我是阿星，阿星的阿，阿星的星！