使用 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

首先，删除计算中的 :，然后确保通过将变量包装在 #{ }

中来插入 Sass 变量

Answer 2

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

其次，您需要使用 #{$var} 和 calc 对变量进行插值，否则编译器只会吐出 css.

中的变量名

这是一个工作版本：

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

使用 CSS3 计算和 SCSS？

Calc and SCSS with CSS3?

sass

calc