css/scss: is there a way to clean this up and make it dryer?

Question

I have a class content and isActive. Do I have to "include" the mixin twice like below so that it would apply when I have an element like <div class="content"> and <div class="content isActive">

 .content {
    padding: 0 40px;

    &.isActive {
      padding: 20px 40px;
      background: black;
      color: $color-white;
      border-right: none;

      .meta {
        border-bottom: none;
      }

      @include tablet-vertical-down {
        border: 0;
        padding: 0;
      }
    }

    @include tablet-vertical-down {
      border: 0;
      padding: 0;
    }
  }

You would be better asking this at CodeReview.SE but check their guidelines first. — Paulie_D, Aug 10 '21 at 15:26

score 0 · Accepted Answer · answered Aug 10 '21 at 15:50

You can use & to refer to the current selector and combine it with &.isActive.

.content {
    padding: 0 40px;

    &.isActive {
      padding: 20px 40px;
      background: black;
      color: $color-white;
      border-right: none;

      .meta {
        border-bottom: none;
      }
    }

    &, &.isActive {
      @include tablet-vertical-down {
        border: 0;
        padding: 0;
      }
    }
  }

css/scss: is there a way to clean this up and make it dryer?

1 Answers1