如何简单地 CSS class 具有相同的属性，除了一个 属性

Question

我正在开发一个 React 网络应用程序，它有 2 列，分别是 leftCol 和 rightCol className。两者 class 几乎相同 属性 只是 z-index 不同。以下是造型

&__rightCol {
​ position : relative;
 ​box-sizing: border-box;
 ​z-index: 0;

 ​&_box {
  ​display : none;
  ​}
}

&__leftCol {
  position : relative;
  box-sizing: border-box;
  z-index: 1;

  &_box {
   display : none;
   }
}

如何简化这两个 classes，以便我们使用常见的 class 除了 z-index 不同

Answer 1

您似乎在使用 SASS/SCSS?

你可以使用@mixin

@mixin col {
  position : relative;
  box-sizing: border-box;

  &_box {
    display : none;
  }
}

.rightCol {
  @include col;

  z-index: 0;
}

.leftCol {
  @include col;

  z-index: 1;
}

或者如果你使用的是 css-in-js 框架，比如 styled-components 或 emotion，你可以这样写：

const colStyles = (zIndex = 0) => css`
  position : relative;
  box-sizing: border-box;
  z-index: ${zIndex};

  &_box {
    display : none;
  }
`;


const StyledDiv = styled.div`
  &__rightCol {
    ${colStyles(0)};
  }

  &__leftCol {
    ${colStyles(1)};
  }
`

更新：减少

.col {
  position : relative;
  box-sizing: border-box;

  &_box {
    display : none;
  }
}

.rightCol {
  .col();
  z-index: 0;
}

.leftCol {
  .col();
  z-index: 1;
}