@mixin container() {
    .container {
        @content;
    }
}
@mixin add-size($size) {
    width: $size;
}
@function add($a, $b) {
    @return $a + $b;
}

div {
    @include container() {
        $i: 10px;
        @include container() {
            width: $i;
            max-width: add($i, 2px);
        }
        @include add-size($i);
        .foo {
            @include add-size($i);
        }
        .bar {
            @include add-size(add($i, 2px));
        }
    }
}


@mixin breakpoint-with-var($value) {
    $screen: 'screen';
    @media print, #{$screen} and #{$value} {
        @content;
    }
}

@mixin caller-nested {

    $width: '(min-width:640px)';

    @include breakpoint-with-var($width) {
        .position-left {
            color:red;
            @at-root .element {
                $position: left;
                float: $position;
            }
            background:yellow;
        }
    }
}

@include caller-nested;

@mixin span($i) {
  x: y;
  @content;
}

.a {
  @include span(5) {
    .inner { @include span(2); }
  }
}