Sass/Compass - 將變量傳遞給嵌套背景圖像mixin

Question

我想將一個變量（一種顏色的十六進制代碼）傳遞給我已經嵌套在一個mixin中的Compass背景圖像mixin聲明。

當Compass嘗試編譯CSS時，會引發以下錯誤。

error sass/styles.scss (Line 103 of sass/_mixins.scss: Expected a color. Got: #fef1d0) 

當我替換的硬編碼十六進制值即背景圖像混入的CSS中#FEF1D0變量被編譯沒有錯誤。

以下是代碼。

// The variables 
    // primary 
    $yellow:   #FCB813; 
    $blue:    #005696; 

    // secondary 
    $yellow-soft:  #FEF1D0; 
    $blue-soft:   #D9E6EF; 

// The mixin 
    @mixin main-menu($primary, $secondary) { 
     border-bottom: { 
     color: $primary; 
     style: solid; 
    } 
    background: #fff; // older browsers. 
    @include background-image(linear-gradient(top, white 50%, $secondary 50%)); 
    background-size: 100% 200%; 
    background-position: top; 
    margin-left:10px; 
    @include transition(all 0.5s ease); 
    &:hover { 
     background-position: bottom; 
    } 
    } 

//Using the mixin 
    #main-menu { 
    $sections: (
     yellow $yellow $yellow-soft, 
     blue $blue $blue-soft 
    ); 
    @each $color in $sections { 
     a.#{nth($color, 1)} { 
     @include main-menu(#{nth($color, 2)}, #{nth($color, 3)}); 
     } 
    } 

編譯CSS時$secondary被替換爲在背景圖像混入#FEF1D0。 即@include background-image(linear-gradient(top, white 50%, #FEF1D0 50%));

#main-menu a.yellow { 
    border-bottom-color: #fcb813; 
    border-bottom-width: 3px; 
    border-bottom-style: solid; 
    background: #fff; 
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, #ffffff), color-stop(50%, #fef1d0)); 
    background-image: -webkit-linear-gradient(top, #ffffff 50%, #fef1d0 50%); 
    background-image: -moz-linear-gradient(top, #ffffff 50%, #fef1d0 50%); 
    background-image: -o-linear-gradient(top, #ffffff 50%, #fef1d0 50%); 
    background-image: linear-gradient(top, #ffffff 50%, #fef1d0 50%); 
    background-size: 100% 200%; 
    background-position: top; 
    margin-left: 10px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

的目標是有一個充滿友情鏈接後臺與來自底部的BG-顏色的過渡滑動到頂部懸停狀態的背景轉換，感謝這個偉大的suggestion。除了羅盤解析變量的方式之外，其中的工作非常好。

Answer 1

問題出在@include參數。您正在使用的Sass插值兩個參數，它會導致混入把這些變量作爲字符串代替，在這種情況下，顏色：

type_of(#FEF1D0); // returns color 
type_of(#{#FEF1D0}); // returns string 

您可以將字符串傳遞給color財產，但linear-gradient是一個函數，它需要一種顏色。

要解決此問題，您應該刪除第二個參數的插值以將其作爲顏色傳遞。你可以使用第一個參數的插值，但不需要，所以我建議你刪除它。

所以，你應該使用：的

@include main-menu(nth($color, 2), nth($color, 3)); 

代替：

@include main-menu(#{nth($color, 2)}, #{nth($color, 3)})