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（或函数），它会自动声明每个的较浅和较暗的版本。也许是这样的：

@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%;然后在必要时饱和并去饱和。这样我所需要改变的就是那个值。

如何使用sass变量值声明sass变量来创建颜色方案？

1 个答案: