How to calculate with SCSS variables from function : <p>I have a function which converts px to rem. For example:</p>

<pre><code>height: rem-calc(14px); // makes height: 1rem;
</code></pre>

<p>Now I would like to calculate with it from variables. For example:</p>

<pre><code>$switch-track-width: rem-calc(50px);
$switch-thumb-size: $switch-track-width / 2; // making it 25px or 1.7857rem in this case
</code></pre>

<p>That doesn't work so I tried something else:</p>

<pre><code>$switch-thumb-size: ($switch-track-width / 2) + 0rem;
$switch-thumb-size: (#{$switch-track-width} / 2) + 0rem;
</code></pre>

<p>Both <code>$switch-thumb-size</code> examples aren't working either. Now this is dividing but I'm also unable to get <code>times (*)</code>, <code>plus (+)</code> and <code>minus (-)</code> working.</p>

<p>I'm also having a problem when calculating with 2 variables. For example:</p>

<pre><code>$switch-track-height: rem-calc(14px);
$switch-track-width: rem-calc(50px);
$switch-thumb-right: $switch-track-height - $switch-track-width;
</code></pre>

<p>I prever to keep the function inside the variable instead of in the property like: <code>height: rem-calc($switch-track-height);</code>.</p>

<p>If someone could tell me how to calculate with SCSS variables on both examples that would be very helpful. </p>

<p>Thanks in advance</p>
