没你想象的那么难！深度剖析三款最实用的css预处理器

Posted 2021-03-08

等灯等灯~在干货系列无数次被催更之后，渡老师的前端工具小课堂又开课啦！
小渡在后台留言中发现同学们最近对前端CSS的热情很高嘛，最懂你的小渡今天就带着CSS预处理器跟大家见面啦，想学好前端？先来了解一下这些CSS预处理器叭！
了解css的大家可能都知道，我们可以用它来写网页样式，但是却不能用它来编程。在程序员眼里，css是一件很麻烦的东西。
它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。所以，就有人就开始为css加入编程元素，然后就取个名字叫做"css预处理器"。
什么是css预处理器
通俗的说，css预处理器定义了一种新的语言。
基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的css代码的编写过程的同时，它能让你的css具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
css预处理器种类繁多，本次小渡就以Sass、Less、Stylus进行比较。
什么是Sass
Sass是一门高于css的元语言。
它能用来清晰地、结构化地描述文件样式，有着比普通css更加强大的功能。
Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。也就是我们上面说的一种预处理器语言，反正就是可以让我们风骚的定义css。
Sass优缺点
它在css的语法基础上增加了变量（variable）、嵌套（nestedrules）、混合（mixins)、导入（inlineimports）等高级功能，这些拓展令css更加强大与优雅。
使用Sass以及Sass的样式库（如compass）可以更好地组织管理样式文件、以及更高效的开发项目。
缺点呢就是css的文件体积和复杂度不可控、调试难度增加、成本等。
什么是Less
Lesscss是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护。
Lesscss可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
Less优缺点
1.作为目前最流行的css预处理器之一的less，可谓是Sass最强劲的对手，诞生晚于Sass,但是受它的影响较大，又使用css的语法，让大部分开发者和设计师更容易上手。
2.此外，less还可以提供变量和逻辑控制，例如一些通用的颜色值，图片路径等。使用变量的好处了解一下：多出利用和方便维护，只需要改变量值就行了。
3.Less还有合理的样式复用机制，减少代码的冗余以及提高代码的可维护性。
不过优势虽多，也需花费一定时间去了解学习使用这个预处理，会使团队协作的难度加大。
什么是Stylus
对于开发来说，css的弱点在于静态化。我们需要一个真正能提高开发效率的工具，Less，Sass都在这方面做了一些贡献。
诞生于2010年的Stylus来自Node.js社区，主要用来给Node项目进行css预处理支持，所以Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的css。
Stylus优缺点
作为比较年轻的新型语言，Stylus 可以以近似脚本的方式去写css代码，创建健壮的、动态的、富有表现力的css，默认使用 .styl 的作为文件扩展名，支持多样性的css语法。
Stylus比Less更强大，而且基于nodejs比Sass更符合我们的思路。
1.它可以解决样式覆写的问题，尤其是mixin式复用；
2.可缓解多浏览器兼容造成的冗余；
3.使CSS开发更加灵活。
但是css的好处在于简便、随时随地被使用和调试，使用Stylus，增加了预编译css的步骤，让我们开发工作流中多了一个环节，调试也多了个步骤。
而且尽管简单易学但是还是需要一定的学习成本的，因此存在在开发过程增加步骤和增加学习成本的缺点。
通过对三种常用的前端预处理器进行总结分析，我们可以看出没有一种工具可以在瞬息万变的前端学习世界一枝独秀。
现在css预处理器技术已经非常成熟，未来还会涌现越来越多的css预处理器框架，只有不断学习，才能去适应更多简洁直观的框架技术。
不想停留在前端学习的石器时代？那就赶紧添加小渡微信：duyi4299和前端大牛们一起学习最in技术走在互联网风口浪尖吧~小渡等你哦~