
// 根据不同的屏幕加载背景图片
@mixin bi($url, $type: 'png') {
  background-image: url($url + "@2x." + $type);
  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    background-image: url($url + "@3x." + $type);
    background-size: cover;
  }
}

//文字超出后以...显示 支持多行
@mixin fn-ellpisis($line: 1) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}

@mixin btn_scale_hover(){
  transition: .4s all;
  &:hover{
    transform: scale(1.1);
  }
}

@mixin bi-saturate_hover($background-color, $value: 20){ // 背景颜色增加饱和度
  transition: .6s all;
  &:hover{
    background-color: saturate($background-color, $value);
  }
}

@mixin color-saturate_hover($color, $value: 30){ // 颜色增加饱和度
  transition: .6s all;
  &:hover{
    color: saturate($color, $value);
  }
}

@mixin bi-lighten_hover($background-color, $value: 10){ // 背景颜色变浅。
  transition: .6s all;
  &:hover{
    background-color: lighten($background-color, $value);
  }
}

@mixin bi-opacity_hover($opacity: .8){ // 透明度
  transition: .4s all;
  &:hover{
    opacity: $opacity;
  }
}
