Sass - Братья и сестры с другим свойством и общим стилем div внутри

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

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

Вы можете сделать таким образом

здесь мы использовали mixin для v js -карусель-левая кнопка и v js -carousel-left-button , как он использует тот же css

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

Также использовал mixins для div, который также использует тот же 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()
   }
}