SCSS Blend Modes 技术文档

1. 安装指南

1.1 安装 Ruby Gem

首先，你需要安装 compass-blend-modes 这个 Ruby Gem。你可以通过以下命令进行安装：

gem install compass-blend-modes

1.2 在现有 Compass 项目中使用

如果你已经有一个 Compass 项目，可以通过在 config.rb 文件中添加以下代码来引入插件：

# Require any additional compass plugins here.
require 'compass-blend-modes'

1.3 在新 Compass 项目中使用

如果你正在创建一个新的 Compass 项目，可以在创建项目时直接安装插件：

compass create my_project -r compass-blend-modes

2. 项目使用说明

2.1 导入 SCSS 文件

在你的 SCSS 文件中，首先需要导入 blend-modes 文件：

@import 'blend-modes';

2.2 使用示例

以下是一些使用示例，展示了如何在项目中使用不同的混合模式：

// 确保导入了混合模式函数
@import 'blend-modes';

// 纯色背景
.multiply {
	background-color: blend-multiply(#7FFFD4, #DEB887);
}

// RGBa 背景
.multiply {
	background-color: blend-multiply(rgba(#7FFFD4, 0.5), rgba(#DEB887, 0.5));
}

3. 项目 API 使用文档

3.1 混合模式函数

所有的混合模式函数都接受两个颜色参数：$foreground（前景色）和 $background（背景色）。颜色可以是任何 Sass 支持的格式，包括十六进制、RGB、RGBA、HSL 或 HSLA。混合模式函数通过将前景色与背景色结合来实现颜色混合。

• blend-normal($foreground, $background) - 主要用于在混合后保留透明度。
• blend-multiply($foreground, $background)
• blend-lighten($foreground, $background)
• blend-darken($foreground, $background)
• blend-darkercolor($foreground, $background) - Photoshop 中没有此模式。
• blend-lightercolor($foreground, $background) - Photoshop 中没有此模式。
• blend-lineardodge($foreground, $background)
• blend-linearburn($foreground, $background)
• blend-difference($foreground, $background)
• blend-screen($foreground, $background)
• blend-exclusion($foreground, $background)
• blend-overlay($foreground, $background)
• blend-softlight($foreground, $background)
• blend-hardlight($foreground, $background)
• blend-colordodge($foreground, $background)
• blend-colorburn($foreground, $background)
• blend-linearlight($foreground, $background)
• blend-vividlight($foreground, $background)
• blend-pinlight($foreground, $background)
• blend-hardmix($foreground, $background)
• blend-colorblend($foreground, $background)
• blend-dissolve($foreground, $background) - 未实现。Dissolve 将透明度视为像素图案，并应用扩散抖动图案。
• blend-divide($foreground, $background)
• blend-hue($foreground, $background)
• blend-luminosity($foreground, $background)
• blend-saturation($foreground, $background)
• blend-subtract($foreground, $background)

3.2 HSV 函数

这些函数用于在 RGB、HSL 和 HSV 颜色格式之间进行转换。HSV 颜色格式在 CSS 或 Sass 中并不原生支持。这些函数直接取自 Gist。HSV 值用于计算 blend-colorblend、blend-hue、blend-luminosity 和 blend-saturation 函数的结果。

• **hsv-to-hsl($h, [$s: 0, $v: 0])** - 将 HSV 颜色值转换为 HSL 颜色值。`$h可以是表示$h`、`$s和$v` 的三个值的列表。
• **hsl-to-hsv($h, [$ss: 0, $ll: 0])** - 将 HSL 颜色值转换为 HSV 颜色值。`$h可以是表示$h`、`$ss和$ll` 的三个值的列表。
• color-to-hsv($color) - 将 Sass 颜色转换为 HSV 颜色值的列表。
• **hsv-to-color($h, [$s: 0, $v: 0])** - 将 HSV 颜色值的列表转换为 Sass 颜色。`$h可以是表示$h`、`$s和$v` 的三个值的列表。

3.3 内部函数

这些函数用于减少冗余代码，不建议直接使用。它们在单个 r、g 或 b 值上执行混合操作。

注意： 这些函数不打算直接使用。

• blend-lighten-color($foreground, $background)
• blend-darken-color($foreground, $background)
• blend-lineardodge-color($foreground, $background)
• blend-linearburn-color($foreground, $background)
• blend-screen-color($foreground, $background)
• blend-exclusion-color($foreground, $background)
• blend-overlay-color($foreground, $background)
• blend-softlight-color($foreground, $background)
• blend-hardlight-color($foreground, $background)
• blend-colordodge-color($foreground, $background)
• blend-colorburn-color($foreground, $background)
• blend-linearlight-color($foreground, $background)
• blend-vividlight-color($foreground, $background)
• blend-pinlight-color($foreground, $background)
• blend-hardmix-color($foreground, $background)
• blend-divide-color($foreground, $background)

4. 项目安装方式

4.1 通过 Ruby Gem 安装

你可以通过以下命令安装 compass-blend-modes 插件：

gem install compass-blend-modes

4.2 在现有 Compass 项目中引入

在现有 Compass 项目的 config.rb 文件中添加以下代码：

require 'compass-blend-modes'

4.3 在新 Compass 项目中安装

在创建新 Compass 项目时，可以通过以下命令安装插件：

compass create my_project -r compass-blend-modes

通过以上步骤，你可以在项目中使用 compass-blend-modes 插件来实现颜色混合效果。