Calc 및 SCSS와 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

에 그들을 배치하여 말대꾸 변수를 보간해야합니다.

둘째, #{$var}을 사용하여 변수를 보간해야합니다. 그렇지 않으면 컴파일러에서 CSS의 변수 이름을 뱉어 낼 것입니다.

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

: 여기

는 작업 버전입니다

Answer 2

첫째, 제거 : 당신의 계산에 다음 첫째로, 당신은 변수 이름 뒤에 콜론이 필요하지 않습니다 # {}