源本科技 | 码上会

为什么需要预处理器 在现代前端开发中，随着项目规模的日益复杂，传统的 CSS（层叠样式表）逐渐显露出其局限性。CSS 本质上是一种声明式的标记语言，缺乏变量、嵌套、逻辑判断、循环等编程特性。这导致在大型项目中，样式表容易出现以下痛点： 代码冗余：相同的颜色值、字体栈或媒体查询在多处重复书写。 维护困

正文内容 什么是框架 CSS 框架是预先编写好的代码库，旨在简化和加速响应式、视觉风格统一的 Web 界面设计过程。它们提供了开箱即用的组件和网格系统，帮助开发者避免从零开始重复编写 CSS 代码。 CSS 框架为构建现代用户界面（UI）提供了坚实的基础，具有以下优势： 使用更少的代码实现复杂布局

学习目标 掌握 @keyframes 规则，学会定义动画的起始、中间和结束状态 理解并运用 8 大动画属性（如 duration, timing-function, direction 等）精细控制动画行为 学会使用 animation 简写属性高效编写代码 了解性能优化策略与无障碍设计最佳实践 正

学习目标 理解 CSS 过渡的核心概念，掌握如何通过状态变化触发动画 精通四大过渡子属性：transition-property、duration、timing-function 和 delay 学会使用简写属性高效编写过渡代码 了解最佳实践，避免性能陷阱，提升用户交互体验 正文内容 什么是过渡

学习目标 理解 CSS 3D 变换的基本原理，区分 X、Y、Z 三个旋转轴的作用 掌握 rotateX()、rotateY() 和 rotateZ() 函数的语法与应用场景 学会使用 perspective 属性增强 3D 效果的深度感 了解如何结合 transition 实现流畅的 3D 动画交互

学习目标 理解 CSS 继承的核心概念，即子元素如何自动获取父元素的样式特性 区分“自然继承”的属性（如字体、颜色）与“非自然继承”的属性（如盒模型属性） 掌握如何使用 inherit 关键字强制非继承属性实现继承效果 理解特异性如何中断或覆盖继承链 正文内容 什么是继承 继承是面向对象编程（OOP

学习目标 理解 CSS 变量（自定义属性）的核心概念及其在现代 Web 开发中的作用 掌握 CSS 变量的定义语法（--variable-name）与使用方法（var()） 学会利用 :root 选择器管理全局主题，实现一键换肤 了解 CSS 变量的级联特性，能够灵活地在局部作用域中覆盖变量值 正文

学习目标 理解 CSS 特异性的核心概念及其在样式冲突中的作用 掌握不同选择器（行内、ID、类、元素）的特异性层级关系 学会计算和比较特异性值，预测最终应用的样式 了解当特异性相同时，源代码顺序对样式应用的影响 正文内容 什么是特异性 CSS 特异性是浏览器用来确定当多条规则针对同一元素时，哪条 C

学习目标 理解 CSS 逻辑属性的核心概念，区分“物理方向”与“逻辑流向” 掌握 block（块）与 inline（行）在 CSS 布局中的定义及其与传统上下左右的关系 熟悉常用逻辑属性（如 margin-block, padding-inline, inset 等）及其物理属性的对应关系 学会使用

学习目标 理解 CSS 多列布局的核心概念及其应用场景 掌握 column-count、column-gap、column-width 等关键属性的用法 学会使用 column-rule 系列属性美化列之间的分隔线 了解 column-span 的作用，实现标题跨越多列的效果 能够结合响应式设计原则