如何简单地使用除一个属性外具有相同属性的 CSS 类

Question

我正在开发一个反应网络应用程序，它有 2 列作为 leftCol 和 rightCol 类名。两个类具有几乎相同的属性，但 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;
   }
}

如何简化这两个类，以便我们使用除 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 或情感，您可以编写如下内容：

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