为什么会出现css预处理器
css不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所具有的变量、常量以及其他编程语法，css难免会显得非常臃肿且难以维护。but也没有css的替代品，于是乎，css预处理器应运而生。
css预处理器（Sass/Scss、Less、postcss、stylus）到底是什么？
css预处理器的概念：
css预处理器用一种专门的编程语言，进行Web页面样式设计，终再编译成css文件。css预处理器为css增加了一些编程的新特 性，无需考虑浏览器兼容问题。比较优秀且常用的几个css预处理器：sass、less、stylus。
sass
sass：英文全称：Syntactically Awesome Stylesheets,
sass是一种动态样式语言，由Ruby设计和开发，sass语法属于缩排语法，比css多出好多功能（如变量、嵌套、运算、混入（mixin）、继承、指令、颜色处理、函数等），更易于阅读。
sass和scss的关系
sass的缩排语法，对于写惯css语法的开发者非常不友好且无法将css代码加入到Sass里面，因此sass语法进行了改良，sass3就变成了scss（sassy css）。与原来的语法兼容，只是用{}取代了原来的缩进。
sass代码
#id
width:100px
height:200px
scss代码
#id{
width:100px;
height:200px;
}
less
less也是一种动态样式语言，受sass影响较大，为css语言赋予了动态语言的特性，比如：变量，继承，运算，函数。less既可以在客户端上运行，也可以在服务端运行。
中文网址：https://less.bootcss.com/
stylus
2010年产生于node社区，主要用来给node项目进行css预处理支持。 stylus被称为是一种革命性的新语言，它提供了一个高效、动态、和使用表达方式来生成css。stylus同时支持缩进和css常规书写方式（需要安装node），stylus的语法花样多一些，它的文件扩展名是".styl"。
中文网址：https://www.stylus-lang.cn/
中文网址：https://www.zhangxinxue.com/jq/stylus/
saaa/scss与less、stylus的区别
-
编译环境不同
sass需要ruby环境，less需要引入less.js，stylus需要安装node
-
变量符不一样
sass:
$color:#f40less:
@color:#f40stylus:
mainColor = #f40 -
输出风格
sass输出样式的风格可以有四种选择，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简介格式的css代码
compressed：压缩后的css代码
总结
不管是sass、less或者stylus，都可以视为一种基于css之上的高级语言，其目的是为了使css开发更加的灵活、强大，sass、stylus的功能比less强大，基本上可以说是一种真正的编程语言，less则相对清晰明了，易于上手，对编译环境的要求比较比较宽松。
