用一些通用的css代码优化scss嵌套代码

Question

嗨，我正在尝试为某些类别和子类别设计样式。这是代码

const listStyle = styled.div`
  --padding-value: 40px;
  .wrap {
    .listItem,
    .listItemCategory {
      padding-left: var(--padding-value) !important;
    }
    .wrap {
      .listItem,
      .listItemCategory {
        padding-left: calc(var(--padding-value) + 20px) !important;
      }
      .wrap {
        .listItem,
        .listItemCategory {
          padding-left: calc(var(--padding-value) + 40px) !important;
        }
      }
    }
`;

无论如何要在scss中优化这个

Answer 1

您可以将额外的填充提取到其自己的自定义属性中：

--padding-value: 40px;
.wrap {
  .listItem,
  .listItemCategory {
    padding-left: calc(var(--padding-value) + var(--padding-extra, 0)) !important;
  }
  .wrap {
     --padding-extra: 20px;
     .wrap {
       --padding-extra: 40px;
     }
  }
}

注意：避免使用！重要