文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载本篇技术指南取自本仓库的 TILToday I Learned系列笔记讲解 SCSS 内置颜色函数lighten()与darken()的核心用法通过一个百分比参数即可在保持色相Hue与饱和度Saturation不变的前提下对任意颜色进行变亮或变暗处理。读完本文你将掌握这两个函数的签名与参数语义、完整可运行的 HTML SCSS 示例、底层基于 HSL 亮度通道的实现原理以及与 CSSfilter: brightness()方案的适用场景对比可直接应用于按钮悬停态、色板生成、主题配色等日常样式开发。一、核心概念按百分比变亮与变暗SCSS 提供了一对对称的内置颜色函数用于快速生成某一颜色的同色系深浅变体lighten($color, $amount)把颜色变亮指定百分比darken($color, $amount)把颜色变暗指定百分比。其中$amount是一个百分比数值如20%。这种写法与直接手写第二个十六进制色值相比最大的价值在于无需人肉计算你只维护一个基准色变量明暗变体由函数在编译期自动推导且始终与基准色保持同色系色相、饱和度不变视觉上天然协调。这一点也可以从本仓库对 SCSS 变量的使用方式中得到佐证——在 define-css-custom-properties-with-scss-variables.md 中$primary-action: #057A5B这类颜色变量正是项目里统一管理基准色的常见手段而lighten()/darken()正是建立在基准色 变换量这套思路之上的官方函数。二、完整示例三个色块展示原色、变亮、变暗原文档给出了一个可以直接复制运行的示例。首先是 HTML 结构准备三个并排的div分别用来承载变亮版原色版变暗版div classone/div div classtwo/div div classthree/div接着定义基准色变量$box-color并对三个 class 分别应用原色、lighten与darken$box-color: #0074d9; .two { background: $box-color; } .one { background: lighten($box-color, 20%); } .three { background: darken($box-color, 20%); }编译后的行为如下div.two的背景是原始色#0074d9一种亮蓝色div.one使用lighten($box-color, 20%)得到比原色明显更浅的蓝色div.three使用darken($box-color, 20%)得到比原色明显更深的蓝色。三个色块放在一起可以直观看出同一条基准色通过 ±20% 的明暗调节产生了一组视觉层级分明、但色相高度统一的色板。这正是按钮 hover 态、表头底色、卡片描边等场景最常用的配色套路。三、参数语义与取值范围$amount以百分比表示理解其边界对实际使用很重要正值区间内lighten(color, 0%)与darken(color, 0%)均返回原色变换量为零上限截断当亮度已经到达极限白色或黑色时继续加大百分比不会再产生变化——lighten到纯白、darken到纯黑之后结果被钳制在极值上不会溢出对称性对同一颜色而言lighten(color, n%)与darken(color, n%)分别作用于亮度通道的正负两个方向因此两者并非严格的互逆运算因为受 0%100% 亮度区间的截断影响。实际项目中建议像示例一样把变换量控制在5%30%之间的小幅区间既能保证可辨识的层级差异又不会让颜色漂移到失去原本的气质。四、底层原理lighten/darken 操作的是 HSL 亮度通道要理解这两个函数为什么这么稳需要回到颜色的 HSL 模型。本仓库的 define-hsl-colors-with-alpha-values.md 对 HSL 有清晰的说明HSL 是 Hue色相、Saturation饱和度、Lightness亮度三个分量的缩写其中 Lightness 正是决定颜色明暗程度的通道。lighten()与darken()的底层实现逻辑就是在内部把颜色转换为 HSL 表示然后只对 Lightness 分量按百分比做增减Hue 与 Saturation 保持不变lighten(#0074d9, 20%)≈ 提升该颜色的 Lightness 分量 20 个百分点darken(#0074d9, 20%)≈ 降低该颜色的 Lightness 分量 20 个百分点。正是这种只动一个通道的设计保证了变换前后的颜色始终属于同一色系——这是手写近似色值最难以稳定复现的特性。如果你需要更精细的控制例如同时调整饱和度可以基于 HSL 的直觉把hsl(H S L)语法与这两个函数搭配使用先定义 HSL 基准色再用lighten/darken派生明暗变体。五、实战组合变量 函数 Mixinlighten()/darken()在真实项目里很少单独使用通常是基准色变量 明暗变换 复用结构三者结合。结合本仓库其他 SCSS 笔记可以拼出完整的实战形态。5.1 基准色变量统一管理把基准色提取为变量是整个方案的地基参考 define-css-custom-properties-with-scss-variables.md 对 SCSS 变量的用法说明$brand-primary: #0074d9; $brand-primary-hover: darken($brand-primary, 10%); $brand-primary-active: darken($brand-primary, 20%); $brand-primary-light: lighten($brand-primary, 20%);改一处基准色所有明暗变体自动跟着变化不存在改了主色忘了 hover 色的维护隐患。5.2 参数化 Mixin 复用明暗配色结合 parameterized-scss-mixins.md 中的参数化 Mixin 思路可以把基准色 明暗变换封装成可复用的按钮配色mixin button-shades($base-color) { background-color: $base-color; :hover { background-color: darken($base-color, 10%); } :active { background-color: darken($base-color, 20%); } .is-light { background-color: lighten($base-color, 20%); } } .btn-primary { include button-shades(#0074d9); }这样整套按钮状态配色由 Mixin 集中产出后续只需在 Mixin 内部调整变换幅度即可全局生效——这正是 dry-up-scss-with-mixins.md 所强调的单一维护点理念。5.3 与 CSS 自定义属性配合的注意事项如果希望把派生出的颜色暴露为 CSS 自定义属性--color需要注意SCSS 变量不能直接写在自定义属性值里必须使用插值语法#{$var}详见 define-css-custom-properties-with-scss-variables.md。同理lighten()的结果也要先赋值给 SCSS 变量再插值$base: #0074d9; $light: lighten($base, 20%); .box { --box-color: #{$light}; }六、方案对比SCSS 函数 vs CSS brightness() 滤镜本仓库还收录了另一种变亮变暗的思路——lighten-and-darken-with-css-brightness-filter.md 中的 CSSfilter: brightness()。两者适用场景有明显差异维度lighten()/darken()filter: brightness()处理时机SCSS编译期产出的是最终色值浏览器渲染期作用于整个元素外观处理对象单个颜色值可赋值给background、color、border-color等整个元素连同背景、图片、子元素一起变亮/变暗语法示意darken($box-color, 20%)filter: brightness(50%)小于 100% 变暗大于 100% 变亮典型场景生成色板、hover/active 状态色、需要精确控制每个颜色值整块区域的临时视觉强调、图片遮罩、夜间模式降亮度如果只是想让某个元素整体看起来更暗一点例如 hover 整张卡片用brightness()一行即可如果需要把派生出的具体色值存入变量、写进主题配置或供其他属性复用则应当使用 SCSS 的lighten()/darken()。另外filter属于渲染期能力涉及浏览器兼容性考量而 SCSS 函数在编译期就已固化为最终颜色交付给浏览器的就是普通十六进制值没有任何运行时开销与兼容性负担。七、小结lighten($color, $amount)与darken($color, $amount)是 SCSS 中最实用的颜色工具函数之一传入基准色和一个百分比即可获得同色系、亮度可控的变体色。配合基准色变量、参数化 Mixin可以构建出单一基准色驱动整套明暗配色的高可维护样式体系当目标是整元素视觉调整时再切换为 CSS 的filter: brightness()方案。本仓库 README.md 的 CSS 分类下收录了完整的 SCSS 颜色与组织技巧系列包括 HSL 颜色定义、SCSS 变量与自定义属性插值、参数化 Mixin、SCSS Map 取值 等可以作为继续深入的学习路径。赞分享文档教程知识库【免费下载链接】til:memo: Today I Learned项目地址https://gitcode.com/gh_mirrors/ti/til点击查看免费下载相关推荐TinyColor终极指南掌握lighten、darken、saturate等颜色修改方法 TinyColor终极指南掌握lighten、darken、saturate等颜色修改方法 TinyColor是一个快速、小巧的JavaScript颜色前端开发工具用 CSS brightness 滤镜实现元素的提亮与压暗til 实战笔记用 CSS brightness 滤镜实现元素的提亮与压暗til 实战笔记 CSS 的 filter 滤镜属性可以组合多种滤镜函数对元素的最终渲染结果做文档教程知识库用 SCSS 插值Interpolation为 CSS 自定义属性赋值TIL 仓库中的 Sass 实战笔记用 SCSS 插值Interpolation为 CSS 自定义属性赋值TIL 仓库中的 Sass 实战笔记 CSS 自定义属性Custom Proper文档教程知识库上一篇League Akari如何用本地化工具节省75%英雄联盟游戏准备时间下一篇重庆大学LaTeX毕业论文模板终极指南3步告别格式烦恼创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考