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

Question

我正在开发一个反应 web 应用程序，它有 2 列作为 leftCol 和 rightCol 类名。 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;
   }
}

如何简化这两个类，以便我们使用常见的 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;
}