SCSS通用css

前端 , 评论 
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
@for $i from 0 to 101 {
    .mg-#{$i} { 		margin: 		$i * 1rpx;}
    .mg-top-#{$i} { 	margin-top: 	$i * 1rpx !important;}
    .mg-bottom-#{$i} { 	margin-bottom: 	$i * 1rpx !important;}
    .mg-left-#{$i} { 	margin-left: 	$i * 1rpx !important;}
    .mg-right-#{$i} { 	margin-right: 	$i * 1rpx !important;}

    .pd-#{$i} { 		padding: 		$i * 1rpx;}
    .pd-top-#{$i} { 	padding-top: 	$i * 1rpx !important;}
    .pd-bottom-#{$i} { 	padding-bottom: $i * 1rpx !important;}
    .pd-left-#{$i} { 	padding-left: 	$i * 1rpx !important;}
    .pd-right-#{$i} { 	padding-right: 	$i * 1rpx !important;}

    .radius-#{$i} { border-radius: $i * 1rpx; }

    .width-#{$i} { width: $i * 1rpx; }
    .width-#{$i * 2} { width: $i * 2rpx; }
    .font-#{$i} {font-size: $i * 1rpx;}
	.line-#{$i} {line-height: $i * 1rpx;}
}

// flex布局
.flex{display: flex;}
.flex-center{align-items: center;}
.flex-bottom { align-items: flex-end; }
.flex1{flex: 1;}
.flex-column { display: flex; flex-direction: column;}

// 边框
.border {border: 1px solid #eeeeee;}
.border-top{border-top: 1px solid #eeeeee;}
.border-bottom{border-bottom: 1px solid #eeeeee;}

// 文字
.text-center{text-align: center;}
.text-bold{font-weight: bold;}

// 背景
.bg-white{background-color: #fff;}