CODEWITHSUNDEEP
sass
MrGrigri
MrGrigri

Reputation: 314

storing values from calc function as a variable in scss

Hello there fellow coders,

I'm just starting out with SCSS; which is beyond awesome! There is one question I have regarding variables. I am wanting to calculate the width of divs plus it's padding, margins, and borders within a navigation element. I am then wanting to pass that calculated width into a variable like this:

$numbDivs:       4;
$divWidth:       150px;
$divPadd:        10px;
$divBorderWidth: 1px;
$divMarg:        2px;

$navBreakPoint:  calc( #{$numbDivs} * ( #{$divWidth} + ( ( #{$divPadd} + #{$divBorderWidth} + #{$divMarg} ) * 2 ) ) );

I've enen tried it without the #{} portion, and that didn't work.

It might just be that scss doesn't support this...but it would be nice.

Thanks for all of y'all's posts.

Upvotes: 2

Views: 1846

Answers (1)

cimmanon
cimmanon

Reputation: 68319

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)

Upvotes: 2

Related Questions