/* before */
 
$blue: #056ef0;
$column: 200px;
 
.menu {
    width: calc(4 * $column);
}
 
.menu_link {
    background: $blue;
    width: $column;
}
 
/* after */
 
.menu {
    width: calc(4 * 200px);
}
 
.menu_link {
    background: #056ef0;
    width: 200px;
}

/* before */
 
.foo {
    @if 3 < 5 {
        background: green;
    }
    @else {
        background: blue;
    }
}
 
/* after */
 
.foo {
    background: green;
}

/* before */
 
@for $i from 1 to 3 {
    .b-$i { width: $(i)px; }
}
 
/* after */
 
.b-1 {
    width: 1px
}
.b-2 {
    width: 2px
}
.b-3 {
    width: 3px
}

/* before */
 
@each $icon in (foo, bar, baz) {
    .icon-$(icon) {
        background: url('icons/$(icon).png');
    }
}
 
/* after */
 
.icon-foo {
    background: url('icons/foo.png');
}
 
.icon-bar {
    background: url('icons/bar.png');
}
 
.icon-baz {
    background: url('icons/baz.png');
}

/* before */
 
@define-mixin icon $name {
    padding-left: 16px;
 
    &::after {
        content: "";
        background-url: url(/icons/$(name).png);
    }
}
 
.search {
    @mixin icon search;
}
 
/* after */
 
magic {}

/* Before */
 
@import "partials/_base.css"; /* Contents of _base: `body { background: black; }` */
 
 
/* After */
 
body { background: black; }