scss多字体大小适配

1. 定义公共方法

// main.scss
// size按比例缩放
@function scale($size, $scale) {
  // 遍历
  @each $i in $size {
    $i: $i * $scale;
  }
  @return $size;
}
//获取size公共方法
@mixin scale_size($name, $size, $midSize: null, $largeSize: null) {
  #{$name}: $size;
  [data-fontscale='font-sm'] & {
    #{$name}: $size;
  }
  [data-fontscale='font-md'] & {
    @if ($midSize) {
      #{$name}: $midSize;
    } @else {
      #{$name}: scale($size, 1.5);
    }
  }
  [data-fontscale='font-lg'] & {
    @if ($largeSize) {
      #{$name}: $largeSize;
    } @else {
      #{$name}: scale($size, 2);
    }
  }
}

2. 应用

// demo.scss
@import '@/assets/style/main.scss';
.demo-page{
	 @include scale_size('padding', 10px 20px);
}