常用scss函数基本使用及操作（mixin）

在scss中除了可以定义变量，具有@extend和@mixins等特性之外，还自备了一系列的函数功能。
scss自出来之后，广受欢迎，如何能快速写出想要的css呢，可自定义一些scss方法，本人罗列了一些最近用到的scss函数，其实包括文本超出范围的格式化、弹性盒子居中、左浮动、右浮动、iPhone适配、细边框、图标、背景、伪类样式改变等

/显示多行，省略号 
@mixin ellipsis($row:1) {
    /* 显示两行，省略号 */
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $row;
    line-clamp: $row;
    -webkit-box-orient: vertical;
}

//单行，省略号 
@mixin uniline {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

//flex样式
@mixin flex($msg: ()) {
    display: flex;
    @if ($msg) {
        @each $key,
        $value in $msg {
            @if ($key == "i") {
                @if ($value) {
                    align-items: $value;
                }
                @else{
                    align-items: center;
                }
            }
            @else if($key == "c") {
                @if ($value) {
                    justify-content: $value;
                }
                @else{
                    justify-content: center;
                }
            }
			@else if($key == "d") {
                @if ($value) {
                    flex-direction: $value;
                }
                @else{
                    flex-direction: column;
                }
			}
            @else if($key == "w") {
                @if ($value) {
                    flex-wrap:$value;
                }
                @else{
                    flex-wrap:wrap ;
                }
			}
        }
    }
}

//iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max适配	
@mixin iphoneAdaptive ($name:'p',$n:''){
	@if($name == "p"){
		/* 可以通过增加padding-bottom来适配 */
		padding-bottom: calc(#{$n} +  constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/
		padding-bottom: calc(#{$n} +  env(safe-area-inset-bottom)); /*兼容 IOS>11.2*/
	}
	@else if($name == "m"){
		/* 可以通过margin-bottom来适配 */
		margin-bottom: calc(#{$n} +  constant(safe-area-inset-bottom));
		margin-bottom: calc(#{$n} +  env(safe-area-inset-bottom));
	}
	@else if($name == "h"){
		/* 或者改变高度*/
		height: calc(#{$n} +  constant(safe-area-inset-bottom));
		height: calc(#{$n} +  env(safe-area-inset-bottom));
	}
}

// 宽高
@mixin wh($w, $h: $w) {
    width: $w;
    height: $h;
    min-width: $w;
}

// 图片background: url()
@mixin bgUrl($name, $w, $h:$w) {
    width: $w;
    height: $h;
    background: url("@/static/"+$name) no-repeat;
    background-size: $w, $h;
}

// 老生常谈的 1px 问题
// 下边框
@mixin borderTopBot($borderColor, $type: bottom) {
    position: relative;
    &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;

        @if ($type=="top") {
            top: 0;
        }

        @if ($type=="bottom") {
            bottom: 0;
        }

        width: 100%;

        @if ($type=="top") {
            border-top: 1px solid $borderColor;
        }

        @if ($type=="bottom") {
            border-bottom: 1px solid $borderColor;
        }

        transform: scaleY(0.5);
    }

	//图标样式
	@mixin iconStyle() {
	    @include pseudoClassContent;
	    background-repeat: no-repeat;
	    background-size: 100%;
	    background-position: center;
	}
	
	//伪类展示内容
	@mixin pseudoClassContent($text: "") {
	    content: $text;
	}
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139