CODEWITHSUNDEEP
sasscalc
Morten Hjort
Morten Hjort

Reputation: 1012

Calc and SCSS with CSS3?

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?

Upvotes: 2

Views: 3165

Answers (2)

govinski
govinski

Reputation: 116

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});
}

Upvotes: 7

Sascha
Sascha

Reputation: 898

First, remove the : in your calculation, then make sure to interpolate the Sass Variables by wrapping them in #{ }

Upvotes: 1

Related Questions