How to nest calc-variables within other calc-variables in Sass?

Question

How can I link a variable with an calc-value in another variable?

What I do:

$height:                25px;
$size:                  calc(#{$height} - 10px);
$margin:                calc(#{$radiosize} /4);
$padding:               calc(#{$radiosize} *2);

What happens:

$height:                25px;
$size:                  15px;
$margin:                /*does not work*/;
$padding:               /*does not work*/;

CodePen Demo

What does not work? Did you define the value for the variables inside calc? AFAIK this works fine in SASSmeister. — m4n0, Sep 24 '15 at 07:48
the compiler does not set margin and padding ("invalid operands for multiplication")... this works fine in SASSmeister, i know. But intelliJ says no... :-) — cereal_killer, Sep 24 '15 at 07:57

score 2 · Accepted Answer · answered Sep 24 '15 at 08:14

2

You cannot nest calc() function inside another calc().

Current compiled CSS:

margin: calc(calc(25px - 10px) /4); /* Incorrect syntax */
padding: calc(calc(25px - 10px) *2); /* Incorrect syntax */

Solution:

Calculate the size variable directly.

$size: $height - 10px;

Forked Codepen

answered Sep 24 '15 at 08:14

m4n0

29,823
27
76
89

1

You can now nest `calc()` inside another `calc()`. The spec has been changed, and browsers are catching up. Your example works in Chrome. – Illya Moskvin Nov 27 '17 at 15:53
1

Thanks for the comment, Illya. Good work, W3C team! :) – m4n0 Nov 28 '17 at 11:00
@GurebuBokofu They are incompatible. So adjust the other values based on the consistent unit. This is not a generic solution but works for his use case. – m4n0 May 14 '20 at 08:53
@ManojKumar, "This is not a generic solution" - why? I suppose in general case we need to reduce all parameters so single unit. – Takeshi Tokugawa YD May 14 '20 at 09:19
@GurebuBokofu I am saying the answer is not a generic solution but the comment is. – m4n0 May 14 '20 at 23:00
@ManojKumar, Oh, I am sorry for misunderstanding. – Takeshi Tokugawa YD May 15 '20 at 00:25

score 0 · Answer 2 · answered May 04 '16 at 14:05

0

Actually, it is possible to ship a calc() into an other calc(). Unfortunately with a little Hack:

$var1: 3px;
$var2: 5px;

$innerCalc: '(#{$var1} + #{$var2})';
$actualCalc: calc(#{$innerCalc} / 2); //4px

This will do the trick. It simply put all (incl. Brackets) into your calc, but is still able to resolve the variables. Enjoy. :)

P.S. NEVER forget the whitespaces before and after every operator!

answered May 04 '16 at 14:05

NewOutlaw

64
8

Whitespaces are not needed after every operator, only some. – TylerH Nov 27 '17 at 16:08

score 0 · Answer 3 · answered Nov 27 '17 at 16:03

In your case, given the Codepen you provided in the comments, you don't need to use calc(). As a rule of thumb, use calc() when you want to mix units, e.g. subtracting a px value from a %.

It seems that you are manipulating px values either (1) with other px, or (2) with unitless numbers, so there is no need to use calc():

$height:                25px;
$size:                  $height - 10px;
$margin:                $size / 4;
$padding:               $size * 2;

Here's the Codepen: https://codepen.io/imoskvin/pen/gXdMgR

However, to answer your actual question: you can now nest calc() inside other calc()'s!

It seems this was the original intent, and the spec has been updated accordingly. Browsers are catching up: your original Codepen now works as intended in Chrome and Firefox.

For more details, see this answer from one of the spec editors.

How to nest calc-variables within other calc-variables in Sass?

3 Answers3