Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="example">Calc Test</div>

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

// Calc
// Provides fallback and vendor-specific prefixes for calc.
// http://caniuse.com/calc
//
// $property     - Ex: 'max-width'.
// $expression   - Expression to calculate the value from. Ex: '100% - 60px'.
// $fallback     - Expression for browsers without calc support. Ex: '80%'.
@mixin calc($property, $expression, $fallback) {
  #{$property}: #{$fallback};
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

.example {
  @include calc(width, '50% - 100px', 200px);
  background: #ccc;
}

SassMeister-output.css

.example {
  width: 200px;
  width: -webkit-calc(50% - 100px);
  width: calc(50% - 100px);
  background: #ccc;
}

SassMeister-rendered.html

<div class="example">Calc Test</div>