Workarounds for extending inside media queries

stylus-extend-workarounds.md

1. Use @extend by default, copy inside the media queries

placeholder()
  color: red

$placeholder
  placeholder()

.element-a
  // use extend by default
  @extend $placeholder

.element-b
  @media (min-width: 769px)
    // copy the styles
    placeholder()

.element-a {
  color: #f00;
}
@media (min-width: 769px) {
  .element-b {
    color: #f00;
  }
}

2. Duplicate placeholders for each breakpoint

placeholder()
  color: red

$placeholder
  placeholder()

$placeholder--tablet
  @media (min-width: 769px)
    placeholder()

.element-a
  @extend $placeholder

.element-b
  @media (min-width: 769px)
    @extend $placeholder--tablet

.element-a {
  color: #f00;
}
@media (min-width: 769px) {
  .element-b {
    color: #f00;
  }
}

3. Avoid using exting when inside the breakpoint

Will work for elements that are not requiring conflicting styles before the breakpoint where we need to extend

$placeholder
  color: red

.element-a
  @extend $placeholder
  display: none

  @media (min-width: 769px)
    display: block

.element-a {
  color: #f00;
}
.element-a {
  display: none;
}
@media (min-width: 769px) {
  .element-a {
    display: block;
  }
}