Sass 入门 — CSS 预处理器
Sass:变量、嵌套、混入,让 CSS 更强大 · 难度:入门 · +20XP
Sass 是什么?
Sass(Syntactically Awesome Style Sheets)是CSS 预处理器。给 CSS 加入变量、嵌套、混入、函数——写更少的代码。
核心特性
| 特性 | 示例 |
|---|---|
| 变量 | $primary: #2196F3; |
| 嵌套 | .card { .title { ... } } |
| 混入 | @mixin card { ... } |
| 函数 | lighten($color, 20%) |
| 继承 | @extend .base; |
学习与实践建议
- 先理解本节的核心概念和语法规则
- 在右边编辑器中修改示例代码,观察运行结果变化
- 尝试用学到的知识完成一个小练习——比如自己写一个工具函数或小程序
- 遇到问题时,查阅官方文档是最快的学习途径
编程是门实践技能,动手写代码比看教程重要得多。坚持每天练习,你会很快看到进步!