CalcsとSCSS with CSS3？

Question

CSSの値にマージンを設定したいので、Calcが正常に動作することができません。右の例のように私のコードは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

でそれらをラップすることにより、サス変数を補間するようにしてください。

第2に、#{$var}を使って変数を補間する必要があります。そうしないと、コンパイラは変数名をcssに吐き出すだけです。ここで

は作業バージョンです：

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

Answer 2

まず、削除：あなたの計算では、まず、あなたは変数名の後にコロンを必要としない＃{}