How I use Sass's @extend withing @media directives

sassy-extend.scss

@media screen {
  /* Contain floats: h5bp.com/q */
  .clearfix:before, .clearfix:after { content: ""; display: table; }
  .clearfix:after { clear: both; }
  .clearfix { *zoom: 1; }

  /* For image replacement */
  .ir {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
  .ir br { display: none; }

  .course-list {
    @extend .clearfix;
    list-style: none;
    li {
      float: left;
      width: 20px;
      &:before {
        @extend .ir;
        content: "";
        @include sprites-sprite(arrow_left_blue_mini);
        display: inline-block;
        margin: 0 2px 0 0 ;
        width: 4px; height: 7px;
    }
  }
}

// Print styles below, yo.
@media print {

  .course-list {
    list-style: disc outside;
    margin: 1in;
  }

}