@for $i from 1 through 10 {
    .mgt#{($i * 10)}{margin-top: 10rpx * $i}
}

效果等同于

.mgt10 {margin-top:10rpx}
.mgt20 {margin-top:20rpx}
.mgt30 {margin-top:30rpx}
.mgt40 {margin-top:40rpx}
.mgt50 {margin-top:50rpx}
.mgt60 {margin-top:60rpx}
.mgt70 {margin-top:70rpx}
.mgt80 {margin-top:80rpx}
.mgt90 {margin-top:90rpx}
.mgt100 {margin-top:100rpx}

****重点****
小括号() 让样式名内的运算可行

mgt#{($i * 10)}

我的样式库

100行代码写出2000行代码的效果！！

.b1b {
    border: 1rpx solid black;
}

@for $thirty from 1 through 30 {
    .mgt#{($thirty*10)} {
        margin-top: 10rpx * $thirty;
    }

    .mgb#{($thirty*10)} {
        margin-bottom: 10rpx * $thirty;
    }

    .mgl#{($thirty*10)} {
        margin-left: 10rpx * $thirty;
    }

    .mgr#{($thirty*10)} {
        margin-right: 10rpx * $thirty;
    }
    
    .hw#{($thirty*10)} {
        height: 10rpx * $thirty;
        width: 10rpx * $thirty;
    }
    
    .h#{($thirty*10)} {
        height:10rpx * $thirty;
    }
    
    .w#{($thirty*10)} {
        width:10rpx * $thirty;
    }
    
    .top#{($thirty*10)} {
        top: 10rpx * $thirty;
    }
    
    .bottom#{($thirty*10)}{
        bottom: 10rpx * $thirty;
    }
}

@for $ten from 1 through 10 {
    .br#{($ten*10)}{
        border-radius: 10rpx * $ten;
    }
    
    .pd#{($ten*10)}{
        padding: 10rpx * $ten;
    }
    
    .zi#{($ten*10)}{
        z-index: $ten;
    }
    
    .op0d#{$ten}{
        opacity: 0.1rpx * $ten;
    }
}

@for $j from 1 through 100 {
    .w#{$j}p{
        width: 1% * $j;
    }
    
    .h#{$j}p{
        height: 1% * $j;
    }
    
    .fs#{$j}{
        font-size: 1rpx * $j;
    }
}

%df{
    display: flex;
}

%jcc{
    justify-content: center;
}

%aic{
    align-items: center;
}

%jcsb{
    justify-content: space-between;
}

.jcc {
    @extend %jcc;
}

.aic{
    @extend %aic;
}

.jcsb{
    @extend %jcsb;
}

.vm{
    @extend %df, %aic;
}

.hm{
    @extend %df, %jcc;
}

.bs{
    @extend %df, %jcsb;
}

.heart{
    @extend %df,%jcc,%aic;
}

.vmbs {
    @extend .vm,.bs; 
}

.hmbs {
    @extend .hm,.bs;
    // background-color: yellow;
}

$colorArr:black,yellow,blue,red,pink,brown,aqua, black, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, silver, teal, white, yellow;

@each $color in $colorArr {
    .bg-#{$color} {
        background-color: $color;
    }
    
    .f-#{$color} {
        color: $color;
    }
}

关注拎包哥，每天1个教程里没有的前端小知识点。