Sass - 具有不同属性和内部通用 div 样式的兄弟姐妹答案

【问题标题】：Sass - Siblings with diferent property and a common div style insideSass - 具有不同属性和内部通用 div 样式的兄弟姐妹
【发布时间】：2020-04-30 02:56:31
【问题描述】：

关于如何使用 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;
}

谢谢

【问题讨论】：

标签： css sass compass-sass scss-mixins

【解决方案1】：

你可以这样做

这里我们为 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()
   }
}

【讨论】：

【解决方案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 更改为一个类。

【讨论】：

【解决方案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;
  }

}

【讨论】：

【解决方案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

【讨论】：

非常感谢 bajran、Alisson 和 fadehelix 所有人。您所有的答案都向我展示了不错的提示。但更适合我需要的答案就是这个。因为可能更容易维护。 @fcalderan 我喜欢使用 sass 的 &-button 方式，没注意，谢谢

【解决方案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
  }
}

【讨论】：