0_selector_hacks.scss

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

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

1_selector_hacks.sass

=ie6
  * html &
    @content

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

2_selector_hacks.css

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

3_animation.scss

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


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

4_animation.sass

=keyframes
  @-moz-keyframes
    @content

  @-webkit-keyframes
    @content

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

5_animation.css

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

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

6_media_queries.scss

@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; }
}

7_media_queries.sass

=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

8_media_queries.css

#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; } }