使用 CSS3 计算和 SCSS？答案

【问题标题】：Calc and SCSS with CSS3?使用 CSS3 计算和 SCSS？
【发布时间】：2018-05-26 03:53:45
【问题描述】：

我无法让 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 值。怎么样？

【问题讨论】：

标签： sass calc

【解决方案1】：

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

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

这是一个工作版本：

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

【讨论】：

【解决方案2】：

首先，删除计算中的 :，然后确保插入 Sass 变量，将它们包装在 #{ }

【讨论】：