Calc和SCSS与CSS3？

Question

我无法让Calc正常工作，因为我想基于CSS值进行边距处理。作为示例，我的代码在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>

似乎未接受边距左值。为何如此？

Answer 1

首先，您不需要在变量名后加冒号。

其次，您需要使用#{$var}带calc 的变量进行插值，否则编译器只会在CSS中吐出变量名。

这是一个工作版本：

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