Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="box box-one"></div>
<div class="box box-two"></div>
<div class="box box-three"></div>
<div class="box box-four"></div>
<div class="box box-five"></div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// This example illustrates variable scoping in answer to
// a question asked at SydCSS.
// 
// Q) Are mixin arguments locally scoped?
//
// It's assumed you have a file layout as follows:
// 
// main.scss:
// @import(_config.scss);
// @import(_mixins.scss);
// @import(_placeholders.scss);
// @import(comonent/_module.scss);

// ====================================
// $variables ( _config.scss )
// ====================================

$box-background-color: red;
$box-background-color: blue !default;

// ====================================
// @mixins ( _mixin.scss )
// ====================================

// @background-color-(a|b)
// $color: Sets the background color of an element

// a:
// Example of a mixin which is in-adevertantly
// setting the value of a globally defined variable

@mixin background-color-a($color /* local scoped argument */ ) {
    $box-background-color: $color; // don't re-use global variable with a mixin
    background-color:$box-background-color;
}

// b:
// Example of a mixin which is using argument called the same
// as globally defined variable

@mixin background-color-b($box-background-color /* local scoped argument */ ) {
    $box-background-color: yellow;
    background-color:$box-background-color;
}

// ====================================
// %placeholders ( _.placeholders.scss )
// ====================================

%box {
  
  /* Display & box-model */
  width: 100px;
  height: 100px;
  margin: 5px;  
  
  /* Position */
  float: left;  
  
  /* Misc */
  box-shadow: 10px 10px 5px #888;
  text-align: center;
}

// ====================================
// .SCSS ( base.scss )
// ====================================

// set box background to blue

.box {
  @extend %box;
  @include background-color-a(blue); 
}

// set box background to green

.box-two {
  @include background-color-a(green);  
}

// use default box background color ( expecting red ),
// but it is green due to background-color-a

.box-three {
  background-color:$box-background-color; 
}

// set box background to red
// but internally in this mixin I've orridden the value to be yellow
// $box-background-color: yellow;

.box-four {
  @include background-color-b(red);  
}

// the background color is still green here since it was set by background-color-a mixin.
// calling background-color-b for box-four has not affected the color as $box-background-color
// variable is local to the scope of background-color-b.

.box-five {
  background-color:$box-background-color; 
}

// Summary:
// Mixins can override a global variable if it is not scoped locally to the mixin ( via arguments )
// If an argument name is the same as a global variable the argument takes precedence and scope is local to mixin

// If you you need to set locally scoped variables within a mixin and you are writing a 
// component to be used by other developers, it may be advisable to namespace your local
// variable to avoid collisions with global.

SassMeister-output.css

.box {
  /* Display & box-model */
  width: 100px;
  height: 100px;
  margin: 5px;
  /* Position */
  float: left;
  /* Misc */
  box-shadow: 10px 10px 5px #888;
  text-align: center;
}

.box {
  background-color: blue;
}

.box-two {
  background-color: green;
}

.box-three {
  background-color: green;
}

.box-four {
  background-color: yellow;
}

.box-five {
  background-color: green;
}

SassMeister-rendered.html

<div class="box box-one"></div>
<div class="box box-two"></div>
<div class="box box-three"></div>
<div class="box box-four"></div>
<div class="box box-five"></div>