SASS: calc() vs normal calculation?

Question

I previously started working with SASS (scss to be specific) and was wondering, if there's any difference/advantage/disadvantage between the css calc() method or sass calculation?

$divide-by: 50;

//CSS calc()
.example1 {
  height: calc(100vw / #{$divide-by});
}

//SASS calculation
.example2 {
  height: 100vw / $divide-by;
}

Answer 1

SASS calculation is made on compilation. While CSS calc() is always made on the browser. For example:

SASS height: 100px / 2; will compile to height: 50px; <- and this is what the browser will see always no matter what.

CSS width: calc(100% - 20px) will always be this even on the browser, and at that point the browser will do the calculations depending on what that 100% looks like.

in your case height: 100vw / $divide-by; i belive you variable will be considered as a vw value, so if $divide-by is 20, then the compiles version of that height will be height: 5vw;

Let me know if the explanation did not help, and I will try to give you some resources to read.