How to calculate with SCSS variables from function
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
It is actually possible to enter a formula that is compiled to a number: (first example taken from https://sass-lang.com/guide)
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
div {
width: $icon_width + 10px * 2;
}
compiles to
article[role="main"] {
float: left;
width: 62.5%;
}
div {
width: 60px;
}
This only works with compatible units. Otherwise go with someting like
height: calc( 100vh - #{$head_height} - #{$main_height});