Calc and SCSS with CSS3?

Question

I can not get Calc to work properly as I want to make a margin-based on CSS values. My code right as an example is here on JsFiddle: https://jsfiddle.net/nrskvz8q/

    $navwidth: 95px;
    $bodymargin: 2em;



    .object{
      background:red;
      width:50px;
      height:50px;
      padding:10px;
      margin-top: calc($navwidth: + $bodymargin:)
    }

    <div class="object">1</div>

It seems the margin-left value is not accepted. How so?

Answer 1

Firstly, you don't need the colons after the variable names.

Secondly, you need to interpolate the variables using #{$var} with calc, otherwise the compiler will just spit out the variable names in the css.

Here's a working version:

.object {
  background-color: red;
  width: 50px;
  height: 50px;
  padding: 10px;
  margin-top: calc(#{$navwidth} + #{$bodymargin});
}