使用scss的循环语句(for、each)封装公用样式

在项目开发时，我们通常需要生成一些通用的样式，如下，一个一个写，费时费力，还low。现在，就介绍scss 中，如何巧妙的运用函数来实现

js
复制代码
.ml-5 {
  margin-left: 5px;
}
.ml-10 {
  margin-left: 10px;
}
.ml-15 {
  margin-left: 15px;
}
.ml-20 {
  margin-left: 20px;
}
.ml-25 {
  margin-left: 25px;
}
.ml-30 {
  margin-left: 30px;
}
.ml-35 {
  margin-left: 35px;
}

Scss

使用@each $i in循环

js
复制代码
$marginKey: 5, 10, 15, 20, 25, 30, 35; 
@each $i in $marginKey{
    .ml-#{$i}{
      margin-left: $i * 1px;
    }
  }

或者使用@for $i from through 或者@for $i from to来循环变量， through 包含结束值 ， to 不包含结束值

js
复制代码
@for $i from 1 through 7{
    .ml-#{5 * $i}{
      margin-left: $i * 5px;
    }
  }