- 定义公共方法
// 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);
}
}
}
- 应用
// demo.scss
@import '@/assets/style/main.scss';
.demo-page{
@include scale_size('padding', 10px 20px);
}