Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

/*
> Top-level control structures can assign to global variables
> without needing !global. Variables first defined in these
> structures will still be local without !global.

[Changelog](http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#341_22_august_2014)
*/

/* control structures: @if, @for, @each and @while */
$foo: 1;
@if true {
  $foo: 10; // assign without `!global`
}
.sample1 {
  content: $foo; //-> 10
}




/* @function and @mixin need `!global` */
$bar: 2;
@function foo() {
  $foo: 100; // without `!global` so it's local
  $bar: 20 !global;
  @return "foo() function has been used";
}
.sample2 {
  content: foo();
  margin: $foo; //-> 10
  padding: $bar; //-> 20
}




/* Nested `@if` */
$baz: 3;
@function bar() {
  @if true {
    $baz: 30; // without `!global` so it's local
  }
  @return "bar() function has been used";
}
.sample3 {
  content: bar();
  margin: $baz; //-> 3
}




/* use `!global` to define global variables */
@if true {
  $qux: 4 !global;
}
@mixin foo() {
  /* foo() mixin has been used so now you can use `$quux` */
  $quux: 5 !global;
}
.sample4 {
  content: $qux; //-> 4
  @include foo;
  margin: $quux; //-> 5
}

SassMeister-output.css

/*
> Top-level control structures can assign to global variables
> without needing !global. Variables first defined in these
> structures will still be local without !global.

[Changelog](http://sass-lang.com/documentation/file.SASS_CHANGELOG.html#341_22_august_2014)
*/
/* control structures: @if, @for, @each and @while */
.sample1 {
  content: 10;
}

/* @function and @mixin need `!global` */
.sample2 {
  content: "foo() function has been used";
  margin: 10;
  padding: 20;
}

/* Nested `@if` */
.sample3 {
  content: "bar() function has been used";
  margin: 3;
}

/* use `!global` to define global variables */
.sample4 {
  content: 4;
  /* foo() mixin has been used so now you can use `$quux` */
  margin: 5;
}