@mixin apply-to-ie6-only {
    * html {
        @content;
    }
}
@include apply-to-ie6-only {
    #logo {
        background-image: url(/logo.gif);
    }
}


$color: white;
@mixin colors($color: blue) {
    background-color: $color;
    @content;
    border-color: $color;
}
.colors {
    @include colors { color: $color; }
}


@mixin iphone {
    @media only screen and (max-width: 480px) {
        @content;
    }
}

@include iphone {
    body { color: red }
}


#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include iphone {
    width: $sidebar-width / 3;
  }
}


@mixin respond-to($width) {
  @media only screen and (min-width: $width) { @content; }
}

@include respond-to(40em) {
  @for $i from 1 through 2 {
    .grid-#{$i} { width: 100%; }
  }
}

@include respond-to(40em) {
  $i: 1;
  @while $i <= 2 {
    .grid-#{$i} { width: 100%; }
    $i: $i + 1;
  }
}

@mixin nested($args) {
  * body {
    @content;
  }
}

@mixin top($args) {
  * html {
    @include nested($args) {
      @content;
    }
  }
}

@include top('hello' 'world') {
  #logo {
    background-image: url(/logo.gif);
  }
}

@mixin foo {
    @content;
}

@mixin bar {
    @content;
}

A {
    @include foo {
        $top: 10px;

        @include bar {
            top: $top;
        }
    }
}

@mixin two() {
  @content;
}
@mixin three() {
  @content;
}
@mixin one() {
  @include two() {
    @include three() {
      @content;
    }
  }
}
.test {
  @include one() {
    display: none;
  }
}

@mixin empty_content() {
  @content;
}
.test_empty_content {
  display: inline;
  font-weight: bold;
  @include empty_content()
}


$breakpoint-classes: (small, medium);
$grid-columns: 3;

@mixin breakpoint() {
  $bp: 1;
  @content;
}

.grid {
  // Output new widths to not include gutters
  @each $bp in $breakpoint-classes {
    @include breakpoint() {
      @for $i from 1 through $grid-columns {
        // Sizing (percentage)
        > .#{$bp}-#{$i} {
          width: percentage($i/$grid-columns);
        }
      }
    }
  }
}