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

问题描述

我正在开发一个 React Web 应用程序，它有 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 不同之外的公共类

解决方法

您好像在使用 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;
}