Sass Variable in CSS calc() function

Question

I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

If I use the literal 50px instead of my body_padding variable, I get exactly what I want. However, when I switch to the variable, this is the output:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding);
}

How can I get Sass to recognize that it needs to replace the variable within the calc function?

@user3705055 You do need calc as Sass can't calculate 100% - 50px as the units are different. This can only be calculated by the browser, once it knows how big the container is in order to convert 100% to px before adding the values. This is the exact reason why calc exists. — Mog0
– Mog0, Commented Jul 18, 2016 at 16:05
@cimmanon Well, the other way around now, since this question got way more popular. — General Grievance
– General Grievance, Commented Feb 18, 2022 at 18:23

Christoph · Accepted Answer · 2019-10-18 10:27:40Z

3472

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

edited Oct 18, 2019 at 10:27

Christoph

51.4k22 gold badges102 silver badges129 bronze badges

answered Nov 27, 2013 at 7:40

sam

40.7k2 gold badges43 silver badges37 bronze badges

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

6 Comments

brandito Over a year ago

box-sizing: border-box; would be the ideal way to go, in my opinion, of course. In general, the box sizing model should make t

Sylar Over a year ago

Many thanks! I was about to go the css route with calc(100% - var(--body_padding))

Chris Peters Over a year ago

@leachim Sass interpolation is evaluated by the Sass compiler, not by the browser.

noxter Over a year ago

Even if it is OP's question, it’s almost always a bad idea to use interpolation with numbers. Interpolation returns unquoted strings that can’t be used for any further math, and it avoids Sass’s built-in safeguards to ensure that units are used correctly. This case should be better handled with sass' units

Klofi Over a year ago

Note interpolation is no longer needed since sass 1.40.0 per changelog entry "Sass variables and functions can now be used in calc() expressions.". So you can simple use height: calc(100% - $body_padding). Using the interpolation in calc is now actually discouraged by sass documentation at sass-lang.com/documentation/values/calculations.

|

DA SILVA MARLY Joao · Accepted Answer · 2024-01-18 13:34:54Z

145

To use $variables in calc() for any SCSS property:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}

edited Jan 18, 2024 at 13:34

answered Sep 17, 2018 at 9:22

DA SILVA MARLY Joao

1,4591 gold badge9 silver badges6 bronze badges

6 Comments

2b77bee6-5445-4c77-b1eb-4df3e5 Over a year ago

For some reason, I find this answer clearer. I don't do a lot of scss work, so this was "plainer" and easier for me to understand.

Jacques Mathieu Over a year ago

This is definitely a clearer answer than the accepted. 'Interpolate:' meant nothing to me.

Alberto Chiesa Over a year ago

@JacquesMathieu sass-lang.com/documentation/interpolation - If it doesn't mean anything to you and it's an answer with so many votes, probably you should understand what the fuss is about. Just my two cents...

Jacques Mathieu Over a year ago

@A. Chiesa sure, that defines interpolation. However the OP and I did not know of interpolation in SASS, otherwise this question would have never been asked. Thus just stating a word one may have never heard before without a definition or any pretense does not aid in creating an all inclusive answer. That link is certainly helpful though. Would have been nice to see that on the accepted answer.

hamzaali Over a year ago

I was stuck on this for more than 1 hour.

|

Ryan Taylor · Accepted Answer · 2019-11-19 16:31:47Z

60

Even though its not directly related. But I found that the CALC code won't work if you do not put spaces properly.

So this did not work for me calc(#{$a}+7px)

But this worked calc(#{$a} + 7px)

Took me sometime to figure this out.

edited Nov 19, 2019 at 16:31

Ryan Taylor

13.6k3 gold badges41 silver badges34 bronze badges

answered Oct 19, 2019 at 10:18

Udit

6796 silver badges2 bronze badges

4 Comments

Entara Over a year ago

also an additional space after calc ist not allowed. calc (#{$a} + 7px) won't work out.

Jameela Huq Over a year ago

The person above used spaces correctly, so this doesn't really answer their question, but it answered mine. Thank you!

Manish Rana Over a year ago

Yes this worked for me. I tried height:calc(100%-95px); (i.e without proper space. ) at first and it didn't work. But with proper spacing it worked without interpolation

leachim Over a year ago

care, this does not work in IE and Edge HTML

Serkan KONAKCI · Accepted Answer · 2019-01-14 20:42:53Z

I have tried this then i fixed my issue. It will calculate all media-breakpoint automatically by given rate (base-size/rate-size)


$base-size: 16;
$rate-size-xl: 24;

    // set default size for all cases;
    :root {
      --size: #{$base-size};
    }

    // if it's smaller then LG it will set size rate to 16/16;
    // example: if size set to 14px, it will be 14px * 16 / 16 = 14px
    @include media-breakpoint-down(lg) {
      :root {
        --size: #{$base-size};
      }
    }

    // if it is bigger then XL it will set size rate to 24/16;
    // example: if size set to 14px, it will be 14px * 24 / 16 = 21px
    @include media-breakpoint-up(xl) {
      :root {
        --size: #{$rate-size-xl};
      }
    }

@function size($px) {
   @return calc(#{$px} / $base-size * var(--size));
}

div {
  font-size: size(14px);
  width: size(150px);
}

Carl L.D. · Accepted Answer · 2018-10-22 08:29:24Z

Here is a really simple solution using SASS/SCSS and a math formula style:

/* frame circle */
.container {
    position: relative;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    width: 400px;
    height: 400px; }

/* circle sectors */
.menu-frame-sector {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 10000;
    transform-origin: 100% 100%;
  }

$sector_count: 8;
$sector_width: 360deg / $sector_count;

.sec0 {
    transform: rotate(0 * $sector_width) skew($sector_width);
    background-color: red; }
.sec1 {
    transform: rotate(1 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec2 {
    transform: rotate(2 * $sector_width) skew($sector_width);
    background-color: red; }
.sec3 {
    transform: rotate(3 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec4 {
    transform: rotate(4 * $sector_width) skew($sector_width);
    background-color: red; }
.sec5 {
    transform: rotate(5 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec6 {
    transform: rotate(6 * $sector_width) skew($sector_width);
    background-color: red; }
.sec7 {
    transform: rotate(7 * $sector_width) skew($sector_width);
    background-color: blue; }

To conclude, I strongly suggest you to understand transform-origin, rotate() and skew():

https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

Pang · Accepted Answer · 2017-04-21 08:23:08Z

-7

Try this:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}

edited Apr 21, 2017 at 8:23

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Apr 21, 2017 at 8:01

Mas Hary

1063 bronze badges

1 Comment

Qwertiy Over a year ago

It won't work by the same reason as the code in the question.

Collectives™ on Stack Overflow

Sass Variable in CSS calc() function

6 Answers 6

6 Comments

6 Comments

4 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

6 Comments

4 Comments

Comments

Comments

1 Comment

Linked

Related