Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<br/>
<div class="single"><p>single</p></div>
<div class="double"><p>double</p></div>
<div class="test"><p>test</p></div>

SassMeister-input.scss

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

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

$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 
.single {
  padding: $padding;
}
.double {
  padding: $padding-double;
}
// interpolate when a sass var is inside a calc function
.test {
  padding: calc(5% - #{$padding-double});
}


// for demo
div {background: #eee;width: 300px;margin: 10px;float: left;}

SassMeister-rendered.html

<br/>
<div class="single"><p>single</p></div>
<div class="double"><p>double</p></div>
<div class="test"><p>test</p></div>