一, CSS 预处理器
CSS 预处理器是一种专门的编程语言, 用来为 CSS 增加一些编程特性(CSS 本身不是编程语言).
不需要考虑浏览器兼容问题, 因为 CSS 预处理器最终编译和输出的仍是标准的 CSS 样式.
可以在 CSS 预处理器中: 使用变量, 简单逻辑判断, 函数等基本编程技巧.
二, CSS 预处理器主要目的
CSS 语法不够强大(例如: CSS 选择器无法进行嵌套, 导致 CSS 中存在较多重复的选择器语句);CSS 中无法定义变量以及没有合理的样式复用机制, 导致整体 CSS 样式难以维护.
- .body .box .title {
- color: #478fb7;
- font-size: 17px;
- }
- .body .box .name {
- color: #478fb7;
- font-size: 12px;
- }
为了减少 CSS 代码冗余, 为 CSS 提供样式复用机制, 提高 CSS 代码的可维护性.
三, 工作流程
各种预处理器语法不一样, 但最终工作流程是一样的, 以 Sass 为例.
以 Sass 提供的语法规则编写样式代码
经过编译器把 Sass 编写的代码转换成标准的 CSS 代码
浏览器加载解析转换后的 CSS 样式(浏览器只能解析标准的 CSS 代码, 而不能是 Sass 等)
四, 主流 CSS 预处理器
Sass,2007, 最早最成熟的 CSS 预处理器, 有两种语法, 分别以 .Sass 和 .SCSS 为扩展名. SCSS 是 Sass 3 引入的新语法, 完全兼容 CSS3, 并继承了 Sass 的强大功能, 和 CSS 语法结构更接近
Less,2009, 受 Sass 影响大, 以 .Less 为扩展名
Stylus,2010, 来自 Node.JS 社区, 主要用来给 Node 项目进行 CSS 预处理支持, 以 .styl 为扩展名
五, CSS 预处理器的使用
集成在前端开发工具中使用(插件), 如 VS Code,webStorm 等
集成在项目构建工具中, 在项目编译 (打包) 时进行自动转换, 如 webpack,gulp 等
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17789.html