css - Sass-具有不同属性和内部相同div样式的 sibling

关于如何用此代码更好地构造代码有任何帮助吗？
我不希望重复类的名称，并尽可能嵌套代码。将不胜感激如何做到这一点。

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

谢谢

最佳答案

%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

关于css - Sass-具有不同属性和内部相同div样式的 sibling ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59715879/