薩斯插值變量名字符串

Question

我們提供相關的一些具體懸停狀態的顏色顏色：

$red: #cb333b; 
$red-hover: #fe666e; 
$brown: #544742; 
$brown-hover: #877a75; 
etc. 

由於所有的顏色都格式化以同樣的方式，所以我希望寫一個mixin取得顏色的變量名稱，然後連接-hover到最後。這是我第一次嘗試：

@mixin button_colorizor($color) { 
    border-color: $color; 
    color: $color; 
    &:hover { 
    color: #{$color}-hover; 
    border-color: #{$color}-hover; 
    } 
} 

但這樣做是輸出一種顏色像這樣：#f1735f-hover。同樣的事情，當我這樣做：color: #{$color+-hover};

Answer 1

您可以創建顏色的地圖。並通過名稱獲取顏色值。

Demo on sassmeister。

$colors: (
    red: #cb333b, 
    red-hover: #fe666e, 
    brown: #544742, 
    brown-hover: #877a75 
); 

@mixin button_colorizor($color) { 
    color: map-get($colors, $color); 
    border-color: map-get($colors, $color); 

    &:hover { 
    color: map-get($colors, $color + '-hover'); 
    border-color: map-get($colors, $color + '-hover'); 
    } 
} 

a { 
    @include button_colorizor(red); 
} 

span { 
    @include button_colorizor(brown); 
} 

該代碼被編譯爲CSS：

a { 
    color: #cb333b; 
    border-color: #cb333b; 
} 
a:hover { 
    color: #fe666e; 
    border-color: #fe666e; 
} 

span { 
    color: #544742; 
    border-color: #544742; 
} 
span:hover { 
    color: #877a75; 
    border-color: #877a75; 
}