How to calculate with SCSS variables from function

Question

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

not even close to being the same question @DamjanPavlica

Jose V
– Jose V

2019-05-16 16:00:26 +00:00
Commented May 16, 2019 at 16:00 — Jose V
– Jose V, Commented May 16, 2019 at 16:00

SuperDJ · Accepted Answer · 2016-08-28 17:59:45Z

30

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

answered Aug 28, 2016 at 17:59

SuperDJ

7,69911 gold badges44 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexander Elgin Over a year ago

Actually rem-calc is redundant. It works fine without it

delta · Accepted Answer · 2019-03-29 09:46:31Z

10

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});

edited Mar 29, 2019 at 9:46

answered Mar 28, 2019 at 13:45

delta

1011 silver badge3 bronze badges

1 Comment

Otto Abnormalverbraucher Over a year ago

width: $icon_width + 10px * 2; does not compile to width: 60px;. It actually compiles to width: 40px+10px*2;. Calculations only seem to work when there is no variable involved. So width: 40px + 10px * 2; does indeed calculate to width: 60px but as soon as a variable enters the calculation, it's not calculated anymore.

Collectives™ on Stack Overflow

How to calculate with SCSS variables from function

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related