Cacher is the code snippet organizer for pro developers

#sidebar { float: left; width: 300px; }
@media only screen and (max-width: 479px) { #sidebar { float: none; } }
@media only screen and (min-width: 480px) and (max-width: 767px) { #sidebar { float: none; } }
@media only screen and (min-width: 768px) and (max-width: 959px) { #sidebar { width: 240px; } }

=respond-to($media)
  @if $media == handhelds
    @media only screen and (max-width: 479px)
      @content
  @else if $media == wide-handhelds
    @media only screen and (min-width: 480px) and (max-width: 767px)
      @content
  @else if $media == tablets
    @media only screen and (min-width: 768px) and (max-width: 959px)
      @content

#sidebar
  float: left
  width: 300px
  +respond-to(handhelds)
    float: none

  +respond-to(wide-handhelds)
    float: none

  +respond-to(tablets)
    width: 240px

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: 479px) { @content; }
  }
  @else if $media == wide-handhelds {
    @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
  }
  @else if $media == tablets {
    @media only screen and (min-width: 768px) and (max-width: 959px) { @content; }
  }
}

#sidebar {
  float: left;
  width: 300px;
  @include respond-to(handhelds) { float: none; }
  @include respond-to(wide-handhelds) { float: none; }
  @include respond-to(tablets) { width: 240px; }
}

@-moz-keyframes {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

=keyframes
  @-moz-keyframes
    @content

  @-webkit-keyframes
    @content

+keyframes
  0%
    opacity: 0
  100%
    opacity: 1

@mixin keyframes {
  @-moz-keyframes    { @content; }
  @-webkit-keyframes { @content; }
}


@include keyframes {
   0%   { opacity: 0; }
   100% { opacity: 1; }
}

#logo { background-image: url("/images/logo.png"); }
* html #logo { background-image: url("/images/logo.gif"); }

=ie6
  * html &
    @content

#logo
  background-image: url("/images/logo.png")
  +ie6
    background-image: url("/images/logo.gif")

@mixin ie6 { * html & { @content } }

#logo {
  background-image: url("/images/logo.png");
  @include ie6 { background-image: url("/images/logo.gif"); }
}