nuxtProject/assets/scss/base/utils.scss

/**
* $fix 偏移量
* $isLight true:light/false: heavy
 */
@mixin setFontBase($fix, $isLight: false) {


  font-size: #{$base-font-size-normal - 1}px;


  [data-fontsize="nor-small"] & {
    font-size: #{$base-font-size-small - 1 + $fix}px;
    @if $isLight != true {
      font-family: #{$font-family-base};
      font-weight: bold;
    } @else {
      font-family: #{$font-family-base};
      font-weight: normal;
    }
  }
  [data-fontsize="nor-middle"] & {
    font-size: #{$base-font-size-normal - 1 + $fix}px;
    @if $isLight != true {
      font-family: #{$font-family-base};
      font-weight: bold;
    } @else {
      font-family: #{$font-family-base};
      font-weight: normal;
    }
  }
  [data-fontsize="nor-big"] & {
    font-size: #{$base-font-size-big - 1 + $fix}px;
    @if $isLight != true {
      font-family: #{$font-family-base};
      font-weight: bold;
    } @else {
      font-family: #{$font-family-base};
      font-weight: normal;
    }
  }

}


/**
* $attr color backgroud-color
* $fix 偏移量 0
* $type light/dark
 */
@mixin setThemeColorBase($attr, $fix: 0) {
  #{$attr}: map-get(map-get($colors, "blue"), 0);
  [data-theme="blue"] & {
    #{$attr}: map-get(map-get($colors, "blue"), $fix);
  }
  [data-theme="purple"] & {
    #{$attr}: map-get(map-get($colors, "purple"), $fix);
  }
  [data-theme="red"] & {
    #{$attr}: map-get(map-get($colors, "red"), $fix);
  }
  [data-theme="green"] & {
    #{$attr}: map-get(map-get($colors, "green"), $fix);
  }
}

@mixin setStyleAssist() {
  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .w-60 {
    width: 60px;
  }

  .w-120 {
    width: 120px;
  }

  .w-150 {
    width: 150px;
  }

  .mt-15 {
    margin-top: 15px;
  }

  .mt-30 {
    margin-top: 30px;
  }

  .ml-30 {
    margin-left: 30px;
  }

  .text-r {
    text-align: right;
  }

  .pr-15{
    padding-right: 15px;
  }
}

/**
 * 设置 全局字体class类
 */
@mixin setFontAssistClass() {
  .fsize-p {
    @include setFontBase(0)
  }
  .fsize-p-l {
    @include setFontBase(0, true)
  }
  @for $i from 1 through 13 {
    .fsize-p#{$i} {
      @include setFontBase($i)
    }
    .fsize-m#{$i} {
      @include setFontBase(-$i)
    }
    .fsize-p#{$i}-l {
      @include setFontBase($i, true)
    }
    .fsize-m#{$i}-l {
      @include setFontBase(-$i, true)
    }
  }
}

/**
 * 设置 全局字体class类
 */
@mixin setColorAssistClass($attr, $prefix) {

  .#{$prefix}-p {
    @include setThemeColorBase($attr, 0)
  }

  @for $i from 1 through 13 {
    .#{$prefix}-p#{$i} {
      @include setThemeColorBase($attr, $i)
    }
    .#{$prefix}-m#{$i} {
      @include setThemeColorBase($attr, -$i)
    }
  }

}
/**
 * 设置 全局设置 图标
 */
@mixin bgImg($link) {
  background: url("~@/assets/images/" + $link);
}

/*  网站字体样式  */
$client-font-size:20;
//传入改变数值及是否加粗
@mixin setFontStyle($fix, $isBold: false) {
  font-size: #{$client-font-size + $fix}px;
  @if $isBold == true {
    font-weight: bold;
  }
}