sass 中的颜色函数

$btnColors: #409eff, #67c23a, #8b590f, #f54343, #6c6d71;

@for $i form 1 through length($btnColors) {
    .btn.type-#{$i} {
        $color: nth($btnColors, $i);
        backgound: $color;
        color: #fff;
        &:hover {
            background: lighten($color, 10%);
        }
        &:active {
            background: darken($color, 10%);
        }
        &:disabled {
            background: lighten($color, 20%);
        }
    }
}

纯 CSS 实现：

CSS 本身不支持类似 lighten() 这样的函数。如果你想在纯 CSS 中实现类似效果，可以使用 rgba() 颜色模式或者使用 CSS 的 filter 属性进行色彩调整。

使用 filter 进行亮度调整的示例：

.element {
    background-color: #3498db;  /* 原始颜色 */
    filter: brightness(110%);    /* 增加亮度 */
}

RGBA

RGBA 是一种表示颜色的方式，它是 RGB（红、绿、蓝）颜色模型的扩展，加入了 Alpha 通道来控制颜色的透明度。

RGBA 的四个组成部分：

1. R (Red) — 红色 分量，取值范围是 0 到 255，表示红色的强度。
2. G (Green) — 绿色 分量，取值范围是 0 到 255，表示绿色的强度。
3. B (Blue) — 蓝色 分量，取值范围是 0 到 255，表示蓝色的强度。
4. A (Alpha) — 透明度，取值范围是 0 到 1，表示颜色的透明度。
   • 0 表示完全透明（完全看不见）。
   • 1 表示完全不透明（颜色完全可见）。
   • 介于 0 和 1 之间的值表示不同程度的透明度。

HSLA

HSLA 是另一种表示颜色的方式，它是 HSL（色相、饱和度、亮度）颜色模型的扩展，加入了 Alpha 通道来控制颜色的透明度。

HSLA 的四个组成部分：

1. H (Hue) — 色相，取值范围是 0 到 360，表示颜色的种类。0° 代表红色，120° 代表绿色，240° 代表蓝色，360° 则又是红色，依此类推。
2. S (Saturation) — 饱和度，取值范围是 0% 到 100%，表示颜色的纯度或强度。100% 表示完全饱和的颜色，0% 则表示灰色。
3. L (Lightness) — 亮度，取值范围是 0% 到 100%，表示颜色的明亮程度。0% 代表完全黑色，100% 代表完全白色，50% 代表原色的标准亮度。
4. A (Alpha) — 透明度，取值范围是 0 到 1，表示颜色的透明度。
   • 0 表示完全透明（看不见颜色）。
   • 1 表示完全不透明（颜色完全可见）。
   • 介于 0 和 1 之间的值表示不同程度的透明度。