Sass

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

你可以通过这种方式

here we used mixin for vjs-carousel-left-button and vjs-carousel-left-button as it is using same css

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

Also used mixins for div which is also using same css in left and right button

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

Called both mixins in below classes

.vjs-carousel-left-button{
   @include commonCss();
   left: 0;

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

   & div{
     @include commonDivBtnCss()
   }
}

Answer 2

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

.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 更改为 class.

Answer 3

无需重构标记即可使用此结构

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

%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 5

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

.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 的兄弟姐妹

Sass - Siblings with diferent property and a common div style inside

css

compass-sass

scss-mixins

Sass - 内部风格不同 属性 和共同 div 的兄弟姐妹

Sass - Siblings with diferent property and a common div style inside

css

sass

compass-sass

scss-mixins

Sass - 内部风格不同属性和共同 div 的兄弟姐妹