Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

// redhat-theme
:root {
  --foo: 20px;
}

$padding: var( --foo);

// Use the calc function like this
$padding-double: calc( var( --foo, 12px) * 2) ;

// interpolate when a sass var is inside a calc function:
$padding-double: calc( #{$padding} * 2) ;

// This won't work:
//$padding-double: #{var( --foo, 12px)} * 2 ;
//$padding-double: $padding * 2 ;




// USE CASE EXAMPLES 

.double {
  width: $padding-double;
}

// interpolate when a sass var is inside a calc function
.test-again {
  width: calc(50% - #{$padding-double});
}

SassMeister-output.css

:root {
  --foo: 20px;
}

.double {
  width: calc( var(--foo) * 2);
}

.test-again {
  width: calc(50% - calc( var(--foo) * 2));
}