CSS预处理器 作者: lovingyu_er 时间: 2021-01-15 11:50:00 分类: 前端 最近在看Laravel的时候，看到一个词组:```JS,CSS预处理器```,云里雾里，google 了一下它的定义，挺有意思，其定义如下： ####CSS预处理器: 首先,css算不上一种编程语言，只是为了修饰html标签的(html也不是一种编程语言）,而我们通过一种编程语言，使其有编程语言的特性，这就是简单说的：**预处理器使CSS具有的编程特性** <!--more--> 关于CSS预处理器的定义: CSS预处理器是一种专门的编程语言，用来为CSS增加一些编程特性. CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。 CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。 ####工作流程 CSS的预处理语言的工作流程大概如下：(有点和JS的vue之类的渐进式框架有点类似) 1. 提供的语法规则编写样式代码 2. 编译器把编写的代码转换成标准的CSS代码 3. 浏览器加载解析转换后的CSS样式(2.中生成的css代码) #### 预处理器语言: ##### Laravel Mix 介绍：Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your applications. Mix supports several common CSS and JavaScript pre-processors. 网址：https://github.com/JeffreyWay/laravel-mix ##### Sass(SCSS) 介绍：Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 网址：http://sass-lang.com/ ##### LESS 介绍：Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 网址：http://lesscss.org/ ##### Stylus 介绍：Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似， 网址：http://stylus-lang.com/ 标签: 预处理器