billd-live/src/assets/oldcss/mixin.scss

%fullMixin {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

%colorTextMixin {
  position: relative;
  overflow: hidden;
  // 因为colorTextMixin会先编译，它生成的css在colorText的前面，
  // 所以colorTextMixin的background-clip会被后面的colorText的background覆盖，
  // 因此colorTextMixin的background-clip得使用!important
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent;
}

%multiEllipsisMixin {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  word-break: break-all;
}

%arrowMixin {
  position: relative;
  display: inline-block;
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: inherit;
    background-color: inherit;
    content: '';
    transition: all 0.3s ease;
  }
}

// 充满屏幕
@mixin full($position: absolute) {
  position: $position;

  @extend %fullMixin;
}

// 多行省略号
@mixin multiEllipsis($row: 2) {
  @extend %multiEllipsisMixin;
  -webkit-line-clamp: ($row);
  line-clamp: ($row);
}

// 箭头
@mixin arrow($position, $size: 10px) {
  width: $size;
  height: $size;

  @extend %arrowMixin;
  &::after {
    @if $position == 'left' {
      transform: rotate(45deg);
    }
    @if $position == 'right' {
      transform: rotate(-135deg);
    }
    @if $position == 'top' {
      transform: rotate(135deg);
    }
    @if $position == 'bottom' {
      transform: rotate(-45deg);
    }
  }
}

// 颜色文字,用法:@include colorText('#8a2387, #f27121', 'to left');
@mixin colorText($color: '#8a2387, #e94057, #f27121', $position: 'to left') {
  background: -webkit-linear-gradient(
    #{$position},
    #{$color}
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    #{$position},
    #{$color}
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  @extend %colorTextMixin;
}

// 设置背景,用法:@include colorText('#8a2387, #f27121', 'to left');
@mixin setBackground(
  $url,
  $x: center,
  $y: center,
  $repeat: no-repeat,
  $size: contain
) {
  background-image: #{url($url)};
  background-position: $x $y;
  background-size: $size;
  background-repeat: $repeat;
}

// 设置定位位置(默认absolute定位)
@mixin setPosition(
  $position: absolute,
  $top: initial,
  $right: initial,
  $bottom: initial,
  $left: initial
) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 彩色阴影
@mixin colorShadow($background: skyblue) {
  position: relative;
  width: 200px;
  height: 200px;
  img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 100%;

    object-fit: cover;
  }
  &::after {
    position: absolute;
    top: 10%;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: $background;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    content: '';
    filter: blur(10px) brightness(80%) opacity(0.8);
    transform: scale(0.95);
  }
}

// 黑色阴影
@mixin shadow($color: black) {
  // box-shadow: 水平偏移 垂直偏移 模糊半径 阴影颜色;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), 0 10px 10px #{$color};
}

// 高斯模糊/毛玻璃效果
@mixin blur($px: 5px) {
  filter: blur($px);
}