Slider component using 'fugly selectors' and styleguide driven design methodology

_slider.scss

// Slider component
// 
// Using 'fugly selectors' and styleguide driven design methodology
// source: https://www.previousnext.com.au/blog/decouple-design-styleguide-driven-drupal-development
//
// Markup:
// <div class="container">
//   <h2 class="container__title">Title</h2>
//   <div class="slider">
//     <div class="slider__container">
//       <div class="slider__width-constrain">
//         <ul>
//           <li class="slider__item">
//           </li>
//         </ul>
//       </div>
//       <a class="slider__arrow slider__arrow--prev"></a>
//       <a class="slider__arrow slider__arrow--next"></a>
//     </div>
//   </div>
// </div>

%container {
  background: get-color(grayscale, 7);
  margin: 30px 0;
  padding: 30px;
}

%container__title {
  border-bottom: 1px solid get-color(grayscale, 4);
  color: get-color(grayscale, 1);
  font-family: $header-font-family;
  font-size: $font-size-md;
  font-style: italic;
  font-weight: normal;
  line-height: $font-size-md + 2;
  margin-bottom: 40px;
  padding-bottom: 15px;
}

%slider {
  text-align: left;
  font-family: $secondary-font-family;
}

// Wrapper around slider items, _including_ arrows
%slider__container {
  height: 205px;
  padding: 0;
  margin: 0;
  width: 100%;

  @include breakpoint($mobile-menu-bp, $no-query: true) {
    height: 205px;
    width: 100%;
    max-width: 100%;
  }
}

// Wrapper around slider items, _including_ arrows
%slider__container--large {
  @extend %slider__container;
  height: 860px;
  width: auto;

  @include breakpoint($mobile-menu-bp, $no-query: true) {
    height: 430px;
  }
}

// Wrapper around slider items, _excluding_ arrows
%slider__width-constrain {
  width: 100%;

  @include breakpoint($mobile-menu-bp, $no-query: true) {
    width: 100%;
    max-width: 100%;
  }
}

// Wrapper around slider items, _excluding_ arrows
%slider__width-constrain--large {
  @extend %slider__width-constrain;
  max-width: 590px;
  width: auto;
}

%slider__item {
  background: transparent;
  border: none;
  height: 205px;
  margin: 0 20px 0 0;
  width: 130px;

  &:last-child {
    margin-right: 0;
  }

  .is-active {
    cursor: text;
  }
}

%slider__item--large {
  @extend %slider__item;
  height: 860px;

  @include breakpoint($mobile-menu-bp, $no-query: true) {
    width: 100%;
    height: 430px;
  }
}

%slider__arrow {
  width: 42px;
  height: 42px;
  background-repeat: no-repeat;
  background-position: top left;
  top: 18%;

  @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
    background-size: 42px 42px;
  }

  &:hover, &:focus {
    background-position: top left;
  }
}

%slider__arrow--prev {
  background-image: url(../images/slider-left.png);
  left: -21px;

  @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
    background-image: url(../images/[email protected]);
  }

  &:hover, &:focus {
    background-image: url(../images/slider-left-active.png);

    @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
      background-image: url(../images/[email protected]);
    }
  }
}

%slider__arrow--next {
  background-image: url(../images/slider-right.png);
  right: -21px;

  @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
    background-image: url(../images/[email protected]);
  }

  &:hover, &:focus {
    background-image: url(../images/slider-right-active.png);

    @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
      background-image: url(../images/[email protected]);
    }
  }
}

// Fugly selectors:
.pane--department-staff-panel-pane-1,
.pane--program-staff-panel-pane-1 {
  @extend %container;

  .pane__title {
    @extend %container__title;
  }

  .field--department {
    @extend %element-hidden;
  }
}