如何使用sass變量值聲明sass變量來創建配色方案？

Question

我有我的主要顏色變量的列表（取自flatuicolors.com）。

$turquiose: #1abc9c; 
$green-sea: #16a085; 
$emerald: #2ecc71; 
$nephritis: #27ae60; 
$peter-river: #3498db; 
$belize-hole: #2980b9; 
$amethyst: #9b59b6; 
$wisteria: #8e44ad; 
$wet-asphalt: #34495e; 
$midnight-blue: #2c3e50; 
$sun-flower: #f1c40f; 
$orange: #f39c12; 
$carrot: #e67e22; 
$pumpkin: #d35400; 
$alizarin: #e74c3c; 
$pomegranate: #c0392b; 
$clouds: #ecf0f1; 
$silver: #bdc3c7; 
$concrete: #95a5a6; 
$asbestos: #7f8c8d; 

我想創建每一個明亮和灰暗的版本，像這樣：

$turquiose: #1abc9c; 
$turquiose-light: saturate($turquiose, 5%); 
$turquiose-dark: desaturate($turquiose, 5%); 
$green-sea: #16a085; 
$green-sea-light: saturate($green-sea, 5%); 
$green-sea-dark: desaturate($green-sea, 5%); 
$emerald: #2ecc71; 
$emerald-light: saturate($emerald, 5%); 
$emerald-dark: desaturate($emerald, 5%); 
$nephritis: #27ae60; 
$nephritis-light: saturate($nephritis, 5%); 
$nephritis-dark: desaturate($nephritis, 5%); 
$peter-river: #3498db; 
$peter-river-light: saturate($peter-river, 5%); 
$peter-river-dark: desaturate($peter-river, 5%); 
$belize-hole: #2980b9; 
$belize-hole-light: saturate($belize-hole, 5%); 
$belize-hole-dark: desaturate($belize-hole, 5%); 
$amethyst: #9b59b6; 
$amethyst-light: saturate($amethyst, 5%); 
$amethyst-dark: desaturate($amethyst, 5%); 
$wisteria: #8e44ad; 
$wisteria-light: saturate($wisteria, 5%); 
$wisteria-dark: desaturate($wisteria, 5%); 
$wet-asphalt: #34495e; 
$wet-asphalt-light: saturate($wet-asphalt, 5%); 
$wet-asphalt-dark: desaturate($wet-asphalt, 5%); 
$midnight-blue: #2c3e50; 
$midnight-blue-light: saturate($midnight-blue, 5%); 
$midnight-blue-dark: desaturate($midnight-blue, 5%); 
$sun-flower: #f1c40f; 
$sun-flower-light: saturate($sun-flower, 5%); 
$sun-flower-dark: desaturate($sun-flower, 5%); 
$orange: #f39c12; 
$orange-light: saturate($orange, 5%); 
$orange-dark: desaturate($orange, 5%); 
$carrot: #e67e22; 
$carrot-light: saturate($carrot, 5%); 
$carrot-dark: desaturate($carrot, 5%); 
$pumpkin: #d35400; 
$pumpkin-light: saturate($pumpkin, 5%); 
$pumpkin-dark: desaturate($pumpkin, 5%); 
$alizarin: #e74c3c; 
$alizarin-light: saturate($alizarin, 5%); 
$alizarin-dark: desaturate($alizarin, 5%); 
$pomegranate: #c0392b; 
$pomegranate-light: saturate($pomegranate, 5%); 
$pomegranate-dark: desaturate($pomegranate, 5%); 
$clouds: #ecf0f1; 
$clouds-light: saturate($clouds, 5%); 
$clouds-dark: desaturate($clouds, 5%); 
$silver: #bdc3c7; 
$silver-light: saturate($silver, 5%); 
$silver-dark: desaturate($silver, 5%); 
$concrete: #95a5a6; 
$concrete-light: saturate($concrete, 5%); 
$concrete-dark: desaturate($concrete, 5%); 
$asbestos: #7f8c8d; 
$asbestos-light: saturate($asbestos, 5%); 
$asbestos-dark: desaturate($asbestos, 5%); 

我想創建一個混合（或功能）會自動申報每個亮和較暗的版本。也許是這樣的：

@mixin color-variation($name, $color) { 
    $#{$name}: $color; 
    $#{$name}-light: saturate($color, 5%); 
    $#{$name}-dark: desaturate($color, 5%); 
} 

而且，我想申報時自動設置爲一個按鈕或元素的顏色較亮和較暗的版本。例如：

$success-color: $green-sea; // Here I would like $success-color-light to be $green-sea-light and so on. 

今後所有我想改變的是色彩和飽和/飽和度百分比產生的主題風格。

Answer 1

我決定使用$theme-saturation: 5%;，然後在必要時飽和並去飽和。那樣，我必須改變的就是那個價值。