SCSS darken函数
在 SCSS 中，如果你想要生成一个比某个颜色更深的颜色，可以使用 darken() 函数。这个函数接受一个颜色和一个百分比作为参数，返回一个加深了指定百分比的颜色。
示例
假设你有一个基础颜色，你想让这个颜色变得更深一点。这里有一个简单的例子：
// 定义一个基础颜色
$base-color: #ffcc00; // 黄色
// 使用 darken 函数让颜色变深
$darker-color: darken($base-color, 10%); // 让黄色变深10%
// 使用这两个颜色
body {
background-color: $base-color;
color: $darker-color;
}
// 如果你需要在其他地方使用这个更深的颜色
.some-element {
border-color: $darker-color;
}
在这个例子中，$base-color 是一个黄色，我们使用 darken() 函数让它变深了10%。$darker-color 变量现在保存了一个比原颜色更深的颜色，你可以用它来设置背景色、文字颜色或其他任何你需要的地方。
注意事项
darken()函数不会改变颜色的色调，只会调整颜色的亮度。这意味着颜色的基本色调保持不变，只是变暗了。- 第二个参数是一个百分比，表示变暗的程度。你可以根据需要调整这个值，例如
5%、15%或者20%等。
如果你想要创建一个更灵活的方案，可以定义一个混合宏 (mixin) 来简化这个过程：
@mixin darken-color($color, $amount) {
$darkened-color: darken($color, $amount);
background-color: $color;
color: $darkened-color;
}
// 使用混合宏
body {
@include darken-color(#ffcc00, 10%);
}
这样，你就可以在任何需要的地方重用这个混合宏，只需要传递颜色和变暗的程度即可。这种方法可以让你的代码更加模块化和易于维护。