scss 循环怎么写?一段代码,光速学会!

示例代码

$interval: 5;
$iterations: 20;

@for $i from 1 through $iterations {
  $gutter: $i * $interval;
  $margin: $i * $interval;
  $padding: $i * $interval;

  .gutter-#{$gutter}px {
    margin-left: #{$gutter}px;
    margin-right: #{$gutter}px;
  }

  .margin-#{$margin}px {
    margin: #{$margin}px;
  }

  .padding-#{$padding}px {
    padding: #{$padding}px;
  }
}

编译结果

.gutter-5px {
  margin-left: 5px;
  margin-right: 5px;
}

.margin-5px {
  margin: 5px;
}

.padding-5px {
  padding: 5px;
}

.gutter-10px {
  margin-left: 10px;
  margin-right: 10px;
}

.margin-10px {
  margin: 10px;
}

.padding-10px {
  padding: 10px;
}

.gutter-15px {
  margin-left: 15px;
  margin-right: 15px;
}

.margin-15px {
  margin: 15px;
}

.padding-15px {
  padding: 15px;
}

.gutter-20px {
  margin-left: 20px;
  margin-right: 20px;
}

.margin-20px {
  margin: 20px;
}

.padding-20px {
  padding: 20px;
}

.gutter-25px {
  margin-left: 25px;
  margin-right: 25px;
}

.margin-25px {
  margin: 25px;
}

.padding-25px {
  padding: 25px;
}

.gutter-30px {
  margin-left: 30px;
  margin-right: 30px;
}

.margin-30px {
  margin: 30px;
}

.padding-30px {
  padding: 30px;
}

.gutter-35px {
  margin-left: 35px;
  margin-right: 35px;
}

.margin-35px {
  margin: 35px;
}

.padding-35px {
  padding: 35px;
}

.gutter-40px {
  margin-left: 40px;
  margin-right: 40px;
}

.margin-40px {
  margin: 40px;
}

.padding-40px {
  padding: 40px;
}

.gutter-45px {
  margin-left: 45px;
  margin-right: 45px;
}

.margin-45px {
  margin: 45px;
}

.padding-45px {
  padding: 45px;
}

.gutter-50px {
  margin-left: 50px;
  margin-right: 50px;
}

.margin-50px {
  margin: 50px;
}

.padding-50px {
  padding: 50px;
}

.gutter-55px {
  margin-left: 55px;
  margin-right: 55px;
}

.margin-55px {
  margin: 55px;
}

.padding-55px {
  padding: 55px;
}

.gutter-60px {
  margin-left: 60px;
  margin-right: 60px;
}

.margin-60px {
  margin: 60px;
}

.padding-60px {
  padding: 60px;
}

.gutter-65px {
  margin-left: 65px;
  margin-right: 65px;
}

.margin-65px {
  margin: 65px;
}

.padding-65px {
  padding: 65px;
}

.gutter-70px {
  margin-left: 70px;
  margin-right: 70px;
}

.margin-70px {
  margin: 70px;
}

.padding-70px {
  padding: 70px;
}

.gutter-75px {
  margin-left: 75px;
  margin-right: 75px;
}

.margin-75px {
  margin: 75px;
}

.padding-75px {
  padding: 75px;
}

.gutter-80px {
  margin-left: 80px;
  margin-right: 80px;
}

.margin-80px {
  margin: 80px;
}

.padding-80px {
  padding: 80px;
}

.gutter-85px {
  margin-left: 85px;
  margin-right: 85px;
}

.margin-85px {
  margin: 85px;
}

.padding-85px {
  padding: 85px;
}

.gutter-90px {
  margin-left: 90px;
  margin-right: 90px;
}

.margin-90px {
  margin: 90px;
}

.padding-90px {
  padding: 90px;
}

.gutter-95px {
  margin-left: 95px;
  margin-right: 95px;
}

.margin-95px {
  margin: 95px;
}

.padding-95px {
  padding: 95px;
}

.gutter-100px {
  margin-left: 100px;
  margin-right: 100px;
}

.margin-100px {
  margin: 100px;
}

.padding-100px {
  padding: 100px;
}