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

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

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

这是一个有效的版本：

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

Answer 2

首先，删除你的计算中的：，然后确保通过将它们包装在＃{}

中来插入Sass变量

Calc和SCSS与CSS3？

2 个答案: