常用mixin

文字单行溢出省略号

1
2
3
4
5
6
7
8
9
10
@mixin textOneLine{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//调用方法
.title{
  @include textOneLine;
}

文字多行溢出省略号

1
2
3
4
5
6
7
8
9
10
11
12
@mixin textMultipleLine($number:2){
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $number;
  -webkit-box-orient: vertical;
}

//调用方法
.introduce{
  @include textMultipleLine(3);
}

为元素添加点击效果

亮度调整为传入的值（0-1） ,适用于有颜色的元素，背景色或者图案，在底色为白色的情况下效果效果不明显。

1
2
3
4
5
6
7
8
9
10
@mixin tapColor($value:0.98) {
  &:active {
    filter: brightness($value) contrast(100%);
  }
}

//调用方法
.btn{
  @include tapColor(.8);
}

为元素添加点击效果

在为元素添加after伪元素，遮盖元素本体，透明度为0，active时修改透明度（0-1）达到点击视觉反馈。

注：该方法会影响点击事件绑定，如果为你造成莫名其妙的bug对此感到抱歉。

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
@mixin tapMask($opacity:.018) {
  position: relative;
  &:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    z-index: 10;
  }
  &:active {
    &:after {
      opacity: $opacity;
    }
  }
}

//调用方法
.btn{
  @include tapMask(.1);
}

设置元素透明

1
2
3
4
5
6
7
8
9
10
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

//调用方法
.element{
  @include opacity(.5);
}

常用函数

px转rem

1rem等于75px,效果图宽度为750px

1
2
3
4
5
6
7
8
9
@function px2rem($px) {
  @return $px / 75px * 1rem;
}

//调用方法
.head-img{
  width: px2rem(150px);
  height: px2rem(150px);
}