SASS變量被寫入CSS文件VS 2013 Web Essentials

Question

我使用Visual Studio 2013 Express for Web Update 2和Web Essentials Update 2編寫SASS（SCSS Synthax）文件。編譯的CSS文件包含變量名稱而不是值。下面的代碼

$height: 200px; 
#contentDiv { 
    height: calc(100% - $height); 
} 

產生這個CSS

#contentDiv { 
    height: calc(100% - $height); } 

那我做錯了嗎？我創建了一個簡單的Web項目，安裝了Web Essentials，添加了一個SASS文件並開始編寫代碼（SASS的新代碼）。

Answer 1

使用無禮的calculate功能不能減去一個百分比像素，因爲它們不兼容的類型。

如果你想使用CSS的計算功能，那麼你可以這樣做：

$something: 100px; 

#contentDiv { 
    height: calc(100% - #{$something}); 
} 

哪個編譯爲：

#contentDiv { 
    height: calc(100% - 100px); 
} 

Answer 2

我用http://sassmeister.com來檢查你的編譯。

Aparently錯誤是在功能鈣

$something: 100px; 

#contentDiv { 
    heigth: calc(100% - $something); //doesn't work 
    heigth: calculate(100% - $something); //work with errors 
    height: $something;//work 
}