assets/scss/variable.scss
// 主题颜色
$color-theme: #409eff;

// 主题次要色
$color-theme-secondary: #ecf5ff;

// 主文字颜色
$color-title: rgba(0, 0, 0, .85);
$color-primary: rgba(0, 0, 0, .85);
$color-secondary: rgba(0, 0, 0, .45);

$color-red: #f5222d;

// 主背景颜色
$color-main-background: #f8f8f9;
$color-sub-background: #fff;

// 主边框颜色
$color-border: #e9eaed;

// 修饰金色
$color-golden: #f2be45;

$color-white: #fff;

$color-info: #1890ff;
$color-success: #52c41a;
$color-warning: #faad14;
$color-error: #f5222d;

// 遮罩层
$color-mask: rgba(0, 0, 0, .5);

$z-index: 999;

// 文字大小
$font-size-small: 12px;
$font-size-base: 14px;
$font-size-large: 16px;

// 行高
$line-height-base: $font-size-base + 8;

// 圆角
$border-radius: 4px;

// 容器之间的外间距
$container-margin: 24px;

// 容器的内边距
$container-padding: 16px;

$box-shadow: 0 0 15px rgba(0, 0, 0, .1);

// 透明兼容写法
@mixin opacity($number: 0.5) {
  opacity: $number;
  filter: alpha(opacity=#{$number * 100});
}

// 修改input placeholder颜色
@mixin placeholderColor($color: #fff) {
  &::-webkit-input-placeholder {
    color: $color;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $color;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $color;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: $color;
  }
}

%navJustify {
  text-align: justify;

  &:after {
    content: "";
    display: inline-block;
    width: 100%;
  }
}

// 一行文字超出显示省略号
%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

%dialog-model {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(2px);
}

@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    @error 'Value for `to-number` should be a number or a string.';
  }

  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if (index(map-keys($numbers), $character) or $character == '.') {
      @if $character == '.' {
        $digits: 1;
      } @else if $digits == 0 {
        $result: $result * 10 + map-get($numbers, $character);
      } @else {
        $digits: $digits * 10;
        $result: $result + map-get($numbers, $character) / $digits;
      }
    }
  }

  @return if($minus, -$result, $result);
}

// 多行文字超出显示省略号
@mixin ellipsisMultiline($number: 1, $line-height: $line-height-base, $font-size: $font-size-base) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: $number;
  @if str-index($line-height + '', 'px') {
    max-height: to-number($line-height + '') * $number + px;
  } @else {
    max-height: to-number($font-size + '') * $line-height * $number;
  }
}
