SASS編譯順序：函數輸出分配給某些代碼未編譯的變量

Question

我正在使用Bourbon和SASS-flavor Bootstrap。這是我的基地SCSS文件：

@import '../../bower_components/bourbon/dist/_bourbon.scss'; 
@import 'app/swatches.scss'; 
@import '../../bower_components/bootstrap-sass/lib/bootstrap.scss'; 
@import 'app/theme.scss'; 

的想法是，我拉在波旁第一，因爲我打算用它所有的地方，請致電swatches.scss設置應用程序範圍的變量，在引導調用（使用一些），然後開始在Bootstrap之上定製我的應用程序。 swatches.scss看起來是這樣的：

// The brand 
$blue   : #0078ae; 
$grey-light : #58595b; 
$grey-dark  : #59595e; 
$gradient-blue : linear-gradient(#0089ca, #006cb9); 
$gradient-grey : linear-gradient(#e1e2e2 0, #d8d9da 33%, #cecece 33.001%, #b8b8b8 100%); 

// Set Bootstrap's variables (map back to our own vars if need be) 
$brand-primary   : $blue; 
$btn-default-color  : #fff; 
$panel-primary-heading-bg : $gradient-blue; 
$panel-default-heading-bg : $gradient-grey; 

%gradient-blue { 
    @include background-image($gradient-blue); 
} 

不知何故，引導不接收的$gradient-blue編譯後的輸出 - 它接收到的未編譯字符串linear-gradient(#0089ca, #006cb9)。在theme.scss中的代碼在調用$gradient-blue（或擴展%gradient-blue）時沒有問題。

我本該期待$gradient-blue編譯一次並完成。這是怎麼發生的？

Answer 1

我認爲你應該在語法使用線性漸變：

$gradient-blue : @include linear-gradient(#0089ca, #006cb9); 
$gradient-grey : @include linear-gradient(#e1e2e2 0, #d8d9da 33%, #cecece 33.001%, #b8b8b8 100%); 

，因爲它是一個混合。看文檔：http://bourbon.io/docs/#linear-gradient