scss/less
整理一些常用的简写方法，减少代码量。
# flex布局
- 水平方向布局
@each $key, $value in (between: space-between, center: center, around: space-around, end: flex-end) {
.flex-#{$key} {
justify-content: $value;
}
}
1
2
3
4
5
2
3
4
5
@set: {
between: space-between;
center: center;
around: space-around;
end: flex-end;
}
each(@set, {
.flex-@{key} {
justify-content: @value;
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- flex伸缩布局
@for $key from 1 through 4 {
.flex-#{$key} {
flex: $key;
}
}
1
2
3
4
5
2
3
4
5
each(range(4), {
.flex-@{value} {
flex: @value;
}
})
1
2
3
4
5
2
3
4
5
# 文字对齐
@each $key in left, center, right, justify {
.text-#{$key} {
text-align: $key;
}
}
1
2
3
4
5
2
3
4
5
@align: left center right justify;
each(@align, {
.text-@{value} {
text-align: @value;
}
})
1
2
3
4
5
6
2
3
4
5
6
# 颜色相关
/* 变量定义在uni.scss，也可以在前面先定义 */
@each $key, $color in (primary: $uni-color-error, gray: $uni-text-color-grey, white: $uni-bg-color, success: $uni-color-success) {
.#{$key}-color {
color: $color;
}
.bg-#{$key} {
background: $color;
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
/* 变量定义在variable.less，也可以在前面先定义 */
@color: {
primary: @base;
gray: @lightgray;
white: #fff;
success: #07c160;
}
each(@color, {
.@{key}-color {
color: @value;
}
.bg-@{key} {
background: if((@key = gold), @main-bg, @value);
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 间距相关
生成上下左右四个方向的间距，从10到50
@for $num from 1 through 5 {
@each $key, $value in (t: top, r: right, b: bottom, l: left) {
.m#{$key}-#{$num * 10} {
margin-#{$value}: $num * 10rpx;
}
.p#{$key}-#{$num * 10} {
padding-#{$value}: $num * 10rpx;
}
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
@margin: {
t: top;
r: right;
b: bottom;
l: left;
}
each(range(10,50,10), .(@value){
each(@margin, .(@v, @k) {
.m@{k}-@{value} {
margin-@{v}: @value * 1rpx;
}
.p@{k}-@{value} {
padding-@{v}: @value * 1rpx;
}
})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 文字大小
font-size从16 到 36，行高为1或者继承
.line-height {
line-height: 1;
}
@for $fs from 8 through 18 {
.fs-lh-#{$fs * 2} {
font-size: $fs * 2rpx;
@extend .line-height;
}
.fs-#{$fs * 2} {
font-size: $fs * 2rpx;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
each(range(16,36,2), {
.fs-lh-@{value} {
font-size: (@value * 1rpx);
line-height: 1;
}
.fs-@{value} {
font-size: (@value * 1rpx);
}
});
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# mixin
@mixin wh($width, $height: $width) {
width: $width;
height: $height;
}
@mixin lh($height, $lh: $height) {
height: $height;
line-height: $lh;
}
@mixin whl($width, $height: $width, $lh: $height) {
width: $width;
@include lh($height, $lh);
}
@mixin h-cen {
left: 50%;
transform: translateX(-50%);
}
@mixin v-cen {
top: 50%;
transform: translateY(-50%);
}
@mixin abs-center() {
position: absolute;
@include h-cen;
}
@mixin abs-middle() {
position: absolute;
@include v-cen;
}
@mixin multi-ellipsis($line: 2) {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: $line;
}
@mixin round($r: 50%) {
border-radius: $r;
}
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
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
.wh(@width, @height: @width) {
width: @width;
height: @height;
}
.lh(@height, @lh: @height) {
height: @height;
line-height: @lh;
}
.whl(@width, @height: @width, @lh: @height) {
width: @width;
.lh(@height, @lh);
}
.abs-center() {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.abs-middle() {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.multi-ellipsis(@line: 2) {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
-webkit-line-clamp: @line;
}
.round(@r: 50%) {
border-radius: @r;
}
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
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