SuperDJ SuperDJ - 3 months ago 10
Sass (Sass) Question

How to calculate with SCSS variables from function

I have a function which converts px to rem. For example:

height: rem-calc(14px); // makes height: 1rem;


Now I would like to calculate with it from variables. For example:

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


That doesn't work so I tried something else:

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


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

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

$switch-track-height: rem-calc(14px);
$switch-track-width: rem-calc(50px);
$switch-thumb-right: $switch-track-height - $switch-track-width;


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

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

Thanks in advance

Answer

I managed to find something that is some what working. For example:

$switch-thumb-size: rem-calc(10px);
$switch-track-height: rem-calc(20px);
$something: calc( ( #{$switch-thumb-size} - #{$switch-track-height} ) / 2 );

This results in:

calc( ( 0.71428rem - 1.4285rem ) / 2 )

But there are problems with it. First if you know that what you calculated should always be minus and you therefor add a - sign infront of the variable it will not work. Example:

height: - $something; // Doesn't work

The second problem I have with this method is that it creates a lot of redundant characters.

Because it actually puts: height: calc( ( 0.71428rem - 1.4285rem ) / 2 ) in your css instead of: height: -0.35684rem