Sass Variable in CSS Calc() Function

Sass Variable in CSS calc() function

Interpolate:

body
    height: calc(100% - #{$body_padding})

For this case, border-box would also suffice:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

SASS: calc() vs normal calculation?

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.

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

Is it possible to assign the result of `calc()` to a sass/scss variable?

It is not possible to save the result of calc() to a Sass variable.

Sass and its variables are compiled down to CSS during development, whereas calc() is performed at runtime in browser. Sass variables themselves never make it into the actual stylesheet or browser, as they exist just to aid development - only their values make it to CSS.

Using CSS Variables with Calc() not working when 2nd parameter

Nested calcs are possible (https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Nested_calc()_with_CSS_Variables) but your calculation is taking a px unit and dividing it by a px unit which is an invalid operation, the second parameter when using calc and dividing must be numerical. The same can be said for when using the multiplication operator, eg you can't use 10px * 10px, but could do 10 * 10px or 10px * 10 . So I would say looking at your use case, you might be better off with two ScSS / Sass variables.

See the example on this pen:
https://codepen.io/ypoulakas/pen/rQXyZr

$h2fontsize: 21;

$paddingTop: $h2fontsize / 3;

$paddingBottom: $h2fontsize / $paddingTop;

body {
--padding-top: #{$paddingTop}px;  
--padding-bottom: #{$paddingBottom}px;
--margin-top: calc( var( --padding-top ) * 4 );
--margin-left: calc( ( var( --margin-top ) ) / 2 ) ;
  background-color: pink;
}

.test {
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  background-color:red;
  margin-top: var(--margin-top);
  margin-left: var(--margin-left);
}

The two Sass variables are used to control the padding top and bottom based on the h2 font size variable. Looking at your formula though the bottom padding will always be 3 .

As an extended part of your example I set the top and let margins based on css variables rather than Sass ones. If you see the left margin is set as calc (200px / 10px) the margin isn't set but if you remove the px on the 10, the left margin will be set properly.

storing values from calc function as a variable in scss

calc() is a function of CSS, not Sass. If you want to store the result as a variable, drop the string interpolation and just calculate it:

$navBreakPoint:  $numbDivs * ($divWidth + (($divPadd + $divBorderWidth + $divMarg) * 2));

It is worth noting that calc() does not worked in combination with media queries (see: calc() not working within media queries)

Perform Math addition between CSS Variable and SCSS Variable

You can use CSS calc() and SASS interpolation:

calc(var(--header-size) + #{$bar-size});

calc function in scss or css is not working

It looks like it should be this instead:

width: calc(100% -10px)

Which sets the width to 100% of its parent, minus 10 pixels.

---

Related Topics