sass - 使用 CSS3 计算和 SCSS？

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>

似乎不接受 margin-left 值。怎么会这样？

Answer 1

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

其次，您需要使用带有 calc 的 #{$var} 插入变量，否则编译器只会吐出 css 中的变量名。

这是一个工作版本:

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