2

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.

MrGrigri
  • 304
  • 4
  • 15

1 Answers1

2

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)

Community
  • 1
  • 1
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • Thanks, that worked. I guess I was confused on the purpose of calc(). I was able to put that into the variable and then use that variable with Bourbon's media function and it worked perfectly. – MrGrigri Aug 28 '14 at 21:28