SASS: calc () против нормального расчета?

Question

Ранее я начал работать с SASS (точнее, scss), и мне было интересно, есть ли разница / преимущество / недостаток между методом css calc () или расчетом sass?

$divide-by: 50;

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

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

Answer 1

Расчет SASS производится при компиляции.Хотя CSS calc() всегда делается в браузере.Например:

SASS height: 100px / 2; будет компилироваться в height: 50px; <- и это то, что браузер будет видеть всегда, несмотря ни на что. </p>

CSS width: calc(100% - 20px) всегда будет таким даже набраузер, и в этот момент браузер выполнит вычисления в зависимости от того, как выглядит это 100%.

в вашем случае height: 100vw / $divide-by; я верю, что ваша переменная будет рассматриваться как значение vw, поэтому если$divide-by равно 20, тогда версия компиляции этой высоты будет height: 5vw;

Дайте мне знать, если объяснение не помогло, и я постараюсь дать вам некоторые ресурсы для чтения.