Optimize the scss nesting code with some general css code

Question

Hi I am trying to style for some categories and subcategories. Here is the code

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;
        }
      }
    }
`;

Anyway to optimize this in scss

Answer 1

You could extract the extra padding into its own custom property:

--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;
     }
  }
}

Note: Avoid using !important