SCSS中重复父选择器结构的简化方法问询

你可以用SCSS的**@for循环**彻底简化这种重复的嵌套结构，只需要定义最大嵌套层级和基础内边距，就能自动生成所有需要的样式：

$padding: 1rem;
// 设置最大支持的嵌套层级，示例支持4层（ul 到 ul ul ul ul）
$max-level: 4;

@for $i from 0 through $max-level - 1 {
  // 生成对应层级的选择器：第0层是ul a，第1层是ul ul a，以此类推
  #{str-repeat('ul ', $i)}ul a {
    padding-left: $i * $padding;
  }
}

代码说明 #

• $max-level：控制需要支持的最大嵌套层数，想扩展层级只需修改这个变量，不用手动新增选择器
• str-repeat('ul ', $i)：循环生成对应数量的ul 字符串，配合ul a组合成完整的嵌套选择器
• 循环变量$i直接对应内边距的倍数，完美匹配层级递增需求

如果你的项目使用SCSS 3.7及以上版本，也可以用更贴合嵌套语法的写法：

$padding: 1rem;
$max-level: 4;

ul {
  @for $i from 0 through $max-level - 1 {
    a {
      padding-left: $i * $padding;
    }
    // 自动进入下一层嵌套
    & ul { }
  }
}

这两种写法都会生成和你手动编写完全一致的CSS代码，但维护成本大幅降低——调整层级或内边距时，仅需修改变量即可，无需重复复制代码块。

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