sass mixin參數可以是一個全局變量嗎？

Question

首先，請注意，我對Sass真的很陌生。

我正在嘗試創建一個爲我編譯a：active和a：hover效果的混入。我也試圖將mixin標準化，以便可以在不同的場景中使用。

現在的問題是，$main-color全局變量可以像下面的mixin一樣傳遞參數的默認值嗎？所以如果你沒有通過一個特定的值，它總是使用#C5003E作爲默認值。

$main-color: #C5003E; 

@mixin underLine($color: $main-color, $underline-thickness: 1px,) 

blockquote a { 
    color: $bg-color; 

    // 
    // Display 'special dashed' underline on hover 
    // 
    background: linear-gradient(90deg, $color 66%, transparent 0) repeat-x; 
    background-size: .2em $underline-thickness; 
    background-position: 0 1.3em; 

    // 
    // Display 'special' underline on hover 
    // 
    &:hover { 
    background: linear-gradient($color, $color) no-repeat; 
    background-size: 100% $underline-thickness; 
    background-position: 0 1.3em; 
    } 
} 

我也不知道怎麼standarize這個混入

太謝謝你了！

Answer 1

當然，它工作正常，你可以使用全局變量像$main-color作爲傳遞的參數

$main-color: #C5003E; 

@mixin underLine($color: $main-color, $underline-thickness: 1px) { 
    blockquote a { 
    color: $color; 

    // Display 'special dashed' underline on hover 
    background: linear-gradient(90deg, $color 66%, transparent 0) repeat-x; 
    background-size: .2em $underline-thickness; 
    background-position: 0 1.3em; 

    // Display 'special' underline on hover 
    &:hover { 
     background: linear-gradient($color, $color) no-repeat; 
     background-size: 100% $underline-thickness; 
     background-position: 0 1.3em; 
    } 
    } 
} 

這裏是如何使用的mixin：

@include underLine($main-color, 2px) 

的這裏是編譯CSS ：

blockquote a { 
    color: #C5003E; 
    background: linear-gradient(90deg, #C5003E 66%, transparent 0) repeat-x; 
    background-size: 0.2em 2px; 
    background-position: 0 1.3em; 
} 

blockquote a:hover { 
    background: linear-gradient(#C5003E, #C5003E) no-repeat; 
    background-size: 100% 2px; 
    background-position: 0 1.3em; 
}