Sass - 具有不同属性和内部常见 div 风格的兄弟姐妹

Question

关于如何使用 sass 这段代码以更好的方式构建的任何帮助？ 如果可能的话，我不想重复类名并嵌套代码。希望对如何做到这一点有新的愿景。

.vjs-carousel-left-button,
.vjs-carousel-right-button {
position: absolute;
top: 0;
display: table;
cursor: pointer;
z-index: 3;
}
.vjs-carousel-left-button {
left: 0;
}
.vjs-carousel-right-button {
right: 0;
}
.vjs-carousel-left-button div,
.vjs-carousel-right-button div {
display: table-cell;
color: white;
font-size: 5em;
}

谢谢

Answer 1

%vjs-carousel-button {
position: absolute;
top: 0;
display: table;
cursor: pointer;
z-index: 3;
div {
display: table-cell;
color: white;
font-size: 5em;
}
}
.vjs-carousel-left-button {
@extend %vjs-carousel-button;
left: 0;
}
.vjs-carousel-right-button {
@extend %vjs-carousel-button;
right: 0;
}

在这里查看 https://www.sassmeister.com/gist/0cd54708851863215e4457c500881bb2

Answer 2

你可以这样做

在这里，我们将 mixin 用于 VJS-Carousel-left-button

和VJS-Carousel-left-Button，因为它使用相同的 CSS

@mixin commonBtnCss() {
position: absolute;
top: 0;
display: table;
cursor: pointer;
z-index: 3;
}

还使用了div 的 mixins，它也在左右按钮中使用相同的 css

@mixin commonDivBtnCss(){
display: table-cell;
color: white;
font-size: 5em;
}

在下面的类中调用两个混合

.vjs-carousel-left-button{
@include commonCss();
left: 0;
& div{
@include commonDivBtnCss()
}
}
.vjs-carousel-right-button {
@include commonCss()
right: 0;
& div{
@include commonDivBtnCss()
}
}

Answer 3

你可以用你的实际代码试试这个：

.vjs-carousel-left-button,
.vjs-carousel-right-button {
cursor: pointer;
display: table;
position: absolute;
top: 0;
z-index: 3;
div {
color: white;
display: table-cell;
font-size: 5em;
}
}
.vjs-carousel-left-button {
left: 0;
}
.vjs-carousel-right-button {
right: 0;
}

但我不建议你在代码样式中使用 HTML 标记，因为将来你可以更改它，你的代码就会中断。尝试更改课程的div。

Answer 4

无需重构标记，您可以使用此结构

.vjs-carousel {
&-left-button,
&-right-button {
position: absolute;
top: 0;
display: table;
cursor: pointer;
z-index: 3;
div {
display: table-cell;
color: white;
font-size: 5em;
}
}
&-left-button {
left: 0;
}
&-right-button {
right: 0;
}
}

但我强烈建议也为您的两个按钮使用一个通用的类名，(例如.vjs-carousel-buttons(，以便一次性声明所有常见的 CSS 属性，因此可以简化 SASS 代码并生成不那么冗长的输出，如下所示

.vjs-carousel {
&-buttons {
position: absolute;
top: 0;
display: table;
cursor: pointer;
z-index: 3;
div {
display: table-cell;
color: white;
font-size: 5em;
}
}
&-left-button {
left: 0;
}
&-right-button {
right: 0;
}
}

Answer 5

首先，.vjs-carousel-left-button和.vjs-carousel-right-button有很多共同的风格，所以你可以做的是将这段代码移到vjs-carousel-button类中：

.vjs-carousel-button {
position: absolute;
top: 0;
display: table;
cursor: pointer;
z-index: 3;
}
.vjs-carousel-button div {
display: table-cell;
color: white;
font-size: 5em;
}

然后对左右修饰符使用 BEM 约定：

.vjs-carousel-button--left {
left: 0;
}
.vjs-carousel-button--right {
right: 0;
}

在HTML中，它像这样使用：

<button class="vjs-carousel-button vjs-carousel-button--right">Left button</button>

现在，如果您使用 sass，则可以重构代码：

.vjs-carousel-button {
position: absolute;
top: 0;
display: table;
cursor: pointer;
z-index: 3;
& div {
//put here code for div element
}
&--left {
//put here code for the left button
}
&--right {
//put here code for the right button
}
}