Sass 颜色函数
lighten/darken/mix/adjust-hue · 难度:进阶 · +15XP
Sass 颜色函数
Sass 内置强大的颜色处理函数,让你用代码生成调色板。
| 函数 | 作用 |
|---|---|
| lighten($c,%) | 变亮 |
| darken($c,%) | 变暗 |
| mix($c1,$c2) | 混合两色 |
| adjust-hue($c,deg) | 调整色相 |
| rgba($c,$a) | 添加透明度 |
$primary: #2196F3;
.btn:hover { background: darken($primary, 10%); }
.card { background: lighten($primary, 45%); border: 1px solid lighten($primary, 30%); }
学习与实践建议
- 先理解本节的核心概念和语法规则
- 在右边编辑器中修改示例代码,观察运行结果变化
- 尝试用学到的知识完成一个小练习——比如自己写一个工具函数或小程序
- 遇到问题时,查阅官方文档是最快的学习途径
编程是门实践技能,动手写代码比看教程重要得多。坚持每天练习,你会很快看到进步!