利用scss的for循环设置字体、边距等公共样式

1、写法一：

新建一个common.scss文件：⬇️

@for $i from 1 through 140 { // 取值范围是1～140px
    // 字体
    .fs-#{$i} {
        font-size: #{$i}px;
    }
    // 外边距margin-top
    .mt-#{$i} {
        margin-top: #{$i}px;
    }
    // 外边距margin-bottom
    .mb-#{$i} {
        margin-bottom: #{$i}px;
    }
}

使用：

<div class="fs-70">字体大小</div>
<div class="mt-50">上外边距</div>

如果不需要使用那么多值，推荐使用写法二，这样全局统一改也会比较方便。

2、写法二：

// 字体
$fontSizeArr: 100, 50, 30; // 取值范围只能是所定义的这几个值
@each $item in $fontSizeArr {
    .fs-#{$item} {
        font-size: #{$item}px;
    }
}

// 外边距
$marginArr: 100, 90, 60, 30;
@each $item in $marginArr {
    .mt-#{$item} {
        margin-top: #{$item}px;
    }

    .mb-#{$item} {
        margin-bottom: #{$item}px;
    }

    .mr-#{$item} {
        margin-right: #{$item}px;
    }

    .ml-#{$item} {
        margin-left: #{$item}px;
    }
}

使用：

与写法一使用一样，只是取值范围不同

<div class="fs-100">字体大小</div>

记得要在main.js引入公共样式！

import '@/assets/css/common.scss'; // 公共css