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