gistfile1.scss

// example1: ACTIVE AND HOVER STATE

a.error {
  border: 1px solid #c6c6c6;
  color: white;

  &:hover {
    background: #FA4549;
  }

  &:active {
    background: #E30F1A;
  }
}

//example 2: RESPONSIVE

.blog-title {
  text-align: right;
  font-size: 1.8em;

  @include smaller-than( medium ){
    font-size: 1.3em;		
  }
}

//example 2 uses this mixin: 

@mixin smaller-than( $name ) {
  @if( $MQs == true ){
    
    @if( $name == large ){
      @media (max-width: 923px ){ @content; } }

    @if( $name == medium ){
      @media (max-width: 950px ){ @content; } }

    @if( $name == small ){ 
      @media (max-width: 550px ){ @content; } }

  }
}