# 常用样式写法
# 清除浮动
@mixin clear {
width: 0;
height: 0;
display: block;
overflow: hidden;
clear: both;
}
@mixin afterClear {
&:after{
content: "";
@include clear;
}
}
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
# 设置滚动条样式
@mixin setScrollStyle($width:4px, $bgColor:rgba(255,255,255,0), $scorllColor:#ddd, $right:0px) {
//轨道
&::-webkit-scrollbar {
width:$width;
height: $width;
right: $right;
background-color: $bgColor;
}
//滑块
&::-webkit-scrollbar-thumb {
background-color: $scorllColor;
border-radius: 100px;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 单行文本省略号
@mixin oneLine {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@mixin removeOneLine {
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 多行文本省略号
@mixin moreLine($x:1) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $x;
-webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 文字强制换行
// 文字强制换行（尤其适用于中文英文数字混合的时候）
@mixin wordBreak() {
word-wrap: break-word;
word-break: break-all;
}
1
2
3
4
5
6
2
3
4
5
6
# 文字两端对齐
@mixin justify {
text-align: justify;
&:after{
display: inline-block;
padding-left: 100%;
content: '';
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 设置placeholder颜色
@mixin setPlaceholderColor($color:#ccc) {
&::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: $color;
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $color;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $color;
}
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $color;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 百分比
@function getPercent($num) {
@return 100 / $num * 1%;
}
1
2
3
2
3