scss中@each语法结合calc以及percentage(百分比)的应用

与calc结合使用

$pl: 1,2,3; // 定义常量

@each $name in $pl {
  .pl#{$name} {
    padding-left: calc(16px + 12px * #{$name});
  }
}

// 解析后相当于
.pl1 {
  padding-left: 16px + 12px * 1
}
.pl2 {
  padding-left: 16px + 12px * 2
}
.pl3 {
  padding-left: 16px + 12px * 3
}

与percentage结合使用

$width: 20,30,40;

@each $name in $width {
  .w#{$name} {
    width: percentage($name / 100)
  }
}

//解析后相当于
.w20 {
  width: 20%
}
.w30 {
  width: 30%
}
.w40 {
  width: 40%
}