如何使用SCSS编写层级递增20px左侧边距的代码？

你可以用SCSS的@for循环批量生成这些类，不用手动写9个重复规则，代码更简洁易维护：

@for $i from 1 through 9 {
  .level-#{$i} {
    margin-left: ($i - 1) * 20px;
  }
}

代码说明： #

• @from 1 through 9 表示循环范围是1到9（包含9）
• level-#{$i} 会动态生成.level-1到.level-9这些类名
• ($i - 1) * 20px 是边距计算逻辑：第1层级为0px，每往上一层增加20px，和你要的效果完全匹配

这段SCSS编译后，会生成你给出的那段原生CSS代码，效果完全一致。

内容的提问来源于stack exchange，提问作者exotec