Question

有关我如何以更好的方式构造此代码的任何帮助？我不希望重复类的名称，并尽可能地嵌套代码。希望能有一个新的愿景。

.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

您可以通过这种方式完成

在这里，我们为 vjs-carousel-left-button 和 vjs-carousel-left-button 使用了mixin，因为它使用的是相同的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;
}

在下面的类中称这两个mixin

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

Sass-内部具有不同属性且具有相同div样式的兄弟姐妹

5 个答案: