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
| $header-bg: #2b3643;
| $header-font: #c4c7d0;
|
| $blue: #3190e8;
| $bc: #e4e4e4;
| $fc:#fff;
| $common-left: 0.2rem;
| $common-right: 0.6rem;
|
| // $header-bg: #505771;
| // 元素长宽
| @mixin wh($width, $height) {
| width: $width;
| height: $height;
| }
|
| // 字体颜色,大小, 水平布局
| @mixin font($size, $color: #333, $text-align: left){
| font-size: $size;
| color: $color;
| text-align: $text-align;
| }
|
| // flex布局
| @mixin flex($justify-content: center, $align-items: center) {
| display: flex;
| justify-content: $justify-content;
| align-items: $align-items;
| }
|
| // 默认按照父元素的剧中
| @mixin positionCenter($position: absolute) {
| position: $position;
| top: 50%;
| left: 50%;
| transform: translate3d(-50%, -50%, 0);
| }
|
| // 默认按照父元素的剧中
| @mixin positionHCenter($position: absolute) {
| position: $position;
| top: 50%;
| transform: translate3d(0, -50%, 0);
| }
|
| @mixin positionLeft($position: absolute, $left: $common-left) {
| position: $position;
| top: 50%;
| left: $left;
| transform: translate3d(0, -50%, 0);
| }
|
| @mixin positionRight($position: absolute, $right: $common-right) {
| position: $position;
| top: 50%;
| right: $right;
| transform: translate3d(0, -50%, 0);
| }
|
|
