@mixin something {
    color: red;
    pre {
        height: 200px;
    }
}

div {
    color: blue;
    @include something;
}

@mixin something($color) {
    color: $color;

    div {
        height: 20px;
    }
}

@mixin cool($a, $b, $c) {
    height: $a + $b + $c;
}

span {
    @include something(blue);
}

html {
    @include cool(10px, 12px, 21px);
}


@mixin hello_world {
    height: 20px;
}

del {
    @include hello-world;
}


// variable shadowing


$color: white;
@mixin colors($color: blue) {
    color: $color;
}

div {
    color: $color;
    @include colors();
    color: $color;
}

@mixin linear-gradient($from, $to, $pos: left top) {
  background-image: linear-gradient($pos, $from, $to);
}

div {
    @include linear-gradient(red, green);
}

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

div {
    @include box-shadow(10px 10px 5px #888);
    @include box-shadow(inset 10px 10px #888, -10px -10px #f4f4f4);
}

@mixin nested {
    @include something(red);
}

div {
    p  {
        .class {
            @include nested;
        }

        @include nested;

        .top {
            top: 0;

            div {
                color: red;
            }
        }

        color: blue;
    }
}

// mixin content (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content)
@mixin content-simple {
    div.mixin-content-simple {
        @content;
    }
}

@mixin content-with-arg ( $background ) {
    div.mixin-content-with-arg {
        background: $background;
        @content;
    }
}

@include content-simple {
    color: red;
}

@include content-with-arg($background: blue) {
    color: red;
}

@include content-with-arg($background: purple) {
    @include hello_world;
}

@include content-simple {
    @include cool(10px, 12px, 21px);
}

@include content-simple {
    @include something(orange);
}

@include content-with-arg($background: purple) {
    @include cool(10px, 12px, 21px);
}

@include content-with-arg($background: purple) {
    @include something(orange);
}

@mixin wallpaper($image, $top: 0, $right: 0, $bottom: 0, $left: 0) {
  background: $image;
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin logo($offsets...) {
  @include wallpaper(url(/images/logo.png), $offsets...);
}

#please-wait {
  @include logo(1em, $left: 4em, $bottom: 3em);
}

@mixin prefixer($property, $value) {
-webkit-#{$property}: $value;
}

@mixin transform($property: none) {
    @include prefixer(transform, $property);
}

div.parameter-name-scope {
    @include transform(translateX(50px));
}

@mixin keyframes( $name )
{
    @-webkit-keyframes $name {
        @content;
    }
}

@include keyframes( change-color )
{
    0% { color: green; }
    100% { color: red; }
}

@mixin test-mixin($color: #000) {
  @media screen and (min-width:0\0) {
    color: $color;
  }
}
.test{
  @include test-mixin();
}

@mixin inner($value) {}

@mixin outer($value) {
  #{$value} {
    content: "#{$value}";
    @content;
    content: "#{$value}";
  }
}

@include outer(div) {
  @include inner('break');
  @include outer(p) {
    @include inner('break');
  }
}


@mixin content-with-using() {
  $some-color: black;
  @content($some-color, left);
}

@mixin content-with-using-and-args($other-color) {
  $some-color: black;
  @content($some-color, left, $other-color);
}

@mixin content-with-using-nested($other-color) {
  $some-color: red;
  .content-with-using-nested-outside {
    @include content-with-using-and-args($other-color) using ($color, $align, $background) {
      background-color: $background;
      color: $color;
      text-align: $align;
    }
    @content($some-color, right, $other-color);
  }
}

@include content-with-using() using ($using-color, $using-align) {
  .content-with-using-scope-test-before {
    border-color: $using-color;
    color: $color;
    text-align: $using-align;
  }
}

@include content-with-using() using ($color, $align) {
  .content-with-using {
    color: $color;
    text-align: $align;
  }
}

@include content-with-using() using ($using-color, $using-align) {
  .content-with-using-scope-test-after {
    background-color: $using-color;
    color: $color;
    text-align: $using-align;
  }
}

.content-with-using-scope-test-outside {
  color: $color;
}

@include content-with-using-and-args($color) using ($color, $align, $background) {
  .content-with-using-and-args {
    background-color: $background;
    color: $color;
    text-align: $align;
  }
}

@include content-with-using-nested($color) using ($color, $align, $background) {
  .content-with-using-nested-inside {
    background-color: $background;
    color: $color;
    text-align: $align;
  }
}

.skin {
  $scopedColor: #ccc;

  @mixin myborder() {
    border:1px solid $scopedColor;
    @content;
  }

  .var-in-class {
    @include myborder();
  }
}