Sass sass:color 模块介绍

Sass 是一种强化 CSS 的预处理器，让开发者可以使用变量、嵌套、混合、继承等高级语言特性来编写 CSS。其中，sass:color 模块提供了一些常用的颜色相关操作。

安装

可以通过 npm 进行安装：

npm install sass sass:color

导入

可以使用 @use 指令导入 sass:color 模块：

@use "sass:color";

API

sass:color 模块提供了一些全局函数和变量。

颜色操作函数

adjust-color($color, $kwargs...)

调整颜色的某些属性：

$color: #fea47f;
background-color: adjust-color($color, $lightness: -50%, $alpha: -0.5);

alpha($color)

获取颜色的不透明度，返回一个 0 到 1 之间的小数：

$color: rgba(255, 0, 0, 0.5);
opacity: alpha($color);

change-color($color, $kwargs...)

改变颜色的某些属性：

$color: #fea47f;
background-color: change-color($color, $saturation: -50%, $alpha: 0.8);

complement($color)

获取颜色的补色：

$color: #fea47f;
background-color: complement($color);

darken($color, $amount)

将颜色变暗：

$color: #fea47f;
background-color: darken($color, 20%);

desaturate($color, $amount)

将颜色变灰：

$color: #fea47f;
background-color: desaturate($color, 50%);

grayscale($color)

将颜色变成灰色：

$color: #fea47f;
background-color: grayscale($color);

hue($color)

获取颜色的色相，返回 0 到 360 之间的整数：

$color: #fea47f;
color: hue($color);

invert($color)

获取颜色的反色：

$color: #fea47f;
background-color: invert($color);

lighten($color, $amount)

将颜色变亮：

$color: #fea47f;
background-color: lighten($color, 20%);

mix($color1, $color2, $weight)

混合两个颜色：

$color1: #fea47f;
$color2: #8c7ae6;
background-color: mix($color1, $color2);

opacify($color, $amount)

将颜色变得更加不透明：

$color: rgba(255, 0, 0, 0.5);
background-color: opacify($color, 0.2);

saturate($color, $amount)

将颜色饱和度变高：

$color: #fea47f;
background-color: saturate($color, 50%);

scale-color($color, $kwargs...)

缩放颜色的各个属性：

$color: #fea47f;
background-color: scale-color($color, $lightness: -50%);

adjust-hue($color, $degrees)

调整颜色的色相：

$color: #fea47f;
background-color: adjust-hue($color, 45deg);

颜色值

$black

黑色。

$white

白色。

$gray

灰色，等同于 $gray: #808080。

$red

红色，等同于 $red: #ff0000。

$orange

橙色，等同于 $orange: #ff7f00。

$yellow

黄色，等同于 $yellow: #ffff00。

$green

绿色，等同于 $green: #00ff00。

$cyan

蓝绿色，等同于 $turquoise: #00ffff。

$blue

蓝色，等同于 $blue: #0000ff。

$purple

紫色，等同于 $purple: #7f00ff。

示例

下面是一个使用 sass:color 模块提供的函数和变量的示例：

@use "sass:color";

$primary: #fea47f;
$secondary: #8c7ae6;

body {
  background-color: $primary;
  color: color.scale($primary, $lightness: -20%);
}

.card {
  background-color: color.mix($primary, $secondary);
  border: 1px solid color.adjust($secondary, $lightness: 30%);
  box-shadow: 0 0 5px color.adjust($secondary, $alpha: 0.5);
}

总结

sass:color 模块提供了一些常用的颜色操作函数和变量，可以帮助开发者更便捷地创建和修改颜色。使用 @use 指令导入模块，即可开始使用。