CSS 预处理器（框架）：Stylus、LESS 和 Sass

什么是CSS预处理器

---

一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。

总结就是，CSS预处理器为CSS提供了更多更加灵活的可编程性

 

选型

---

基于Vue.js的开发，一般选择使用Stylus。因为Stylus是来源于Node.js社区，与js关系密切

 

 

优缺点

---

优点

用一种专门的编程语言，为CSS增加了一些编程的特性。也就是说，在预处理框架中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。开发者使用这种语言进行编码工作。

通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

 

缺点

简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

 

 

 

 

 

 

总结：

• 什么是css预处理：给css添加了可编程性，使css更加灵活、适应性更高

 

• css预处理的优点缺点：
  • 优点：css添加的可编程性，使得css无需再考虑浏览器的兼容性问题，写法更加简洁(引用父级的多个元素)，可读性更好
  • 缺点：学习成本增加

 

• 三个预处理的比较：
  • 主要是语法书写上不同

 

 

 

参考：

为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

在vue 中使用Stylus

三个预处理器的区别：语法上：谈谈CSS预处理器

stylus 语法篇：张鑫旭翻译的中文文档 。  语法    Stylus基本使用