[英]How to simply CSS class with same properties except one property
I am working on a react web app, which has 2 columns as leftCol and rightCol className.我正在开发一个反应 web 应用程序,它有 2 列作为 leftCol 和 rightCol 类名。 Both class have almost same property with z-index difference. class 两者具有几乎相同的属性,但 z-index 不同。 following is the styling以下是样式
&__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;
}
}
how to simply these both classes, such that we use common class except z-index different如何简化这两个类,以便我们使用常见的 class 除了 z-index 不同
looks like you're using SASS/SCSS?看起来你正在使用 SASS/SCSS?
you can use @mixin
你可以使用@mixin
@mixin col {
position : relative;
box-sizing: border-box;
&_box {
display : none;
}
}
.rightCol {
@include col;
z-index: 0;
}
.leftCol {
@include col;
z-index: 1;
}
or if you're using css-in-js framework like styled-components or emotion, you can write something like this:或者,如果您使用 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)};
}
`
Update: Less更新:少
.col {
position : relative;
box-sizing: border-box;
&_box {
display : none;
}
}
.rightCol {
.col();
z-index: 0;
}
.leftCol {
.col();
z-index: 1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.