如何优化嵌套SCSS代码？分类及子分类样式优化咨询

当然可以用SCSS的特性来优化这段重复的嵌套代码，以下是两种简洁的实现方式，既能保持原有的样式效果，又大幅提升代码的可维护性：

方案一：@for循环处理固定层级 #

原代码是固定三层嵌套的.wrap结构，每层内边距在基础值上递增20px，用@for循环可以自动生成各层级的样式：

const listStyle = styled.div`
  --base-padding: 40px;
  --step-padding: 20px;

  // 第一层：直接子元素的样式
  .wrap > .listItem,
  .wrap > .listItemCategory {
    padding-left: var(--base-padding) !important;
  }

  // 自动生成第2、3层的嵌套样式
  @for $i from 2 through 3 {
    ${'.wrap'.repeat($i)} > .listItem,
    ${'.wrap'.repeat($i)} > .listItemCategory {
      padding-left: calc(var(--base-padding) + var(--step-padding) * ($i - 1)) !important;
    }
  }
`;

优势 #

• 把重复的嵌套逻辑用循环替代，代码更简洁
• 基础内边距和递增步长用CSS变量定义，后续调整数值只需要修改变量
• 循环范围可灵活修改，比如要增加到4层，只需把through 3改成through 4

方案二：递归嵌套（适用于层级不固定的场景） #

如果后续可能需要调整嵌套层级的数量，用SCSS的递归嵌套特性会更灵活：

const listStyle = styled.div`
  --base-padding: 40px;
  --step-padding: 20px;
  $max-level: 3; // 最大嵌套层级

  .wrap {
    $current-level: 1;
    .listItem, .listItemCategory {
      padding-left: var(--base-padding) !important;
    }

    // 递归生成下一层
    @while $current-level < $max-level {
      $current-level: $current-level + 1;
      .wrap {
        .listItem, .listItemCategory {
          padding-left: calc(var(--base-padding) + var(--step-padding) * ($current-level - 1)) !important;
        }

        // 继续递归直到达到最大层级
        @if $current-level < $max-level {
          @content;
        }
      }
    }
  }
`;

说明 #

通过$max-level变量控制最大嵌套层级，后续要调整层级数量，只需要修改这个变量的值即可，无需手动复制粘贴嵌套代码。

注意事项 #

确保你的项目已经配置支持SCSS语法：

• 安装sass依赖包
• 在构建工具（如Webpack、Vite）中配置SCSS预处理器，让styled-components能正确解析SCSS语法

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