首页
/ SCSS Blend Modes 技术文档

SCSS Blend Modes 技术文档

2024-12-23 14:10:23作者:胡唯隽

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-colorblendblend-hueblend-luminosityblend-saturation 函数的结果。

  • **hsv-to-hsl(h,[h, [s: 0, v:0])HSV颜色值转换为HSL颜色值。v: 0])** - 将 HSV 颜色值转换为 HSL 颜色值。`h可以是表示hh`、`s$v` 的三个值的列表。
  • **hsl-to-hsv(h,[h, [ss: 0, ll:0])HSL颜色值转换为HSV颜色值。ll: 0])** - 将 HSL 颜色值转换为 HSV 颜色值。`h可以是表示hh`、`ss$ll` 的三个值的列表。
  • color-to-hsv($color) - 将 Sass 颜色转换为 HSV 颜色值的列表。
  • **hsv-to-color(h,[h, [s: 0, v:0])HSV颜色值的列表转换为Sass颜色。v: 0])** - 将 HSV 颜色值的列表转换为 Sass 颜色。`h可以是表示hh`、`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 插件来实现颜色混合效果。

热门项目推荐
相关项目推荐

项目优选

收起
Python-100-DaysPython-100-Days
Python - 100天从新手到大师
Python
677
122
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
13
31
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
60
48
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
213
62
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
291
82
inferenceinference
通过更改一行代码,您可以在应用程序中用另一个大型语言模型(LLM)替换OpenAI GPT。Xinference赋予您使用任何所需LLM的自由。借助Xinference,您能够在云端、本地、甚至笔记本电脑上运行任何开源语言模型、语音识别模型和多模态模型的推理。
Python
8
0
arkanalyzerarkanalyzer
方舟分析器:面向ArkTS语言的静态程序分析框架
TypeScript
8
11
MateChatMateChat
前端智能化场景解决方案UI库,轻松构建你的AI应用,我们将持续完善更新,欢迎你的使用与建议。 官网地址:https://matechat.gitcode.com
428
38
RuoYi-Cloud-Vue3RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Vue
47
31
open-eBackupopen-eBackup
open-eBackup是一款开源备份软件,采用集群高扩展架构,通过应用备份通用框架、并行备份等技术,为主流数据库、虚拟化、文件系统、大数据等应用提供E2E的数据备份、恢复等能力,帮助用户实现关键数据高效保护。
HTML
90
64