Sass media queries and @extend

eden.scss

// Fairly safe way to visually hide content, but make it accessible to screen readers
.visually-hidden {
  position: absolute;
  left: -9999px;
  height: 1px;
}

.mobile-offscreen {
  @media screen and (max-width: 700px) {
    @extend .visually-hidden;
  }
}