CODEWITHSUNDEEP
csssasscompass-sassscss-mixins
Bernardao
Bernardao

Reputation: 500

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

Any help about how could I structure in a better way with sass this code? I would like to no repeat the classes names and nest the code if it's possible. Would appreciate a new vision of how to do it.

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

Thank you

Upvotes: 0

Views: 208

Answers (5)

fadehelix
fadehelix

Reputation: 201

First of all both .vjs-carousel-left-button and .vjs-carousel-right-button have a lot style in common so what you can do is to move this code in to the 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;
}

Then use BEM convention for left and right modifiers:

.vjs-carousel-button--left {
  left: 0;
}
.vjs-carousel-button--right {
  right: 0;
}

In HTML it wolud be use like this:

<button class="vjs-carousel-button vjs-carousel-button--right">Left button</button>

Now you can refactor the code if you use 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
  }
}

Upvotes: 1

prgmrDev
prgmrDev

Reputation: 914

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

Check here https://www.sassmeister.com/gist/0cd54708851863215e4457c500881bb2

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

Without refactoring your markup you could use this structure

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

}

But I strongly suggest to also use a common classname for both of your buttons, (e.g. .vjs-carousel-buttons) in order to declare once all the common CSS properties, so the SASS code could be simplified and produce a less verbose output, like so

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

}

Upvotes: 1

Alisson R. Galindo
Alisson R. Galindo

Reputation: 50

You can try this with your actual code: 

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

But I don't recommend you use a HTML tags in code Style, because in the future you can change that and your code will break. Try change div for a class.

Upvotes: 1

bajran
bajran

Reputation: 1503

You can do by this way

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

Upvotes: 1

Related Questions