CSS编写的痛点

• CSS作为一种样式语言, 本身用来给HTML元素添加样式是没有问题的,

• 目前前端项目已经越来越复杂, 不再是简简单单的几行CSS就可以搞定的, 我们需要几千行甚至上万行的CSS来完成页面的美化工作

• 随着代码量的增加, 必然会造成很多的编写不便

  • 比如大量的重复代码, 虽然可以用类来勉强管理和抽取, 但是使用起来依然不方便
  • 比如无法定义变量（当然目前已经支持）, 如果一个值被修改, 那么需要修改大量代码, 可维护性很差; (比如主题颜色)
  • 比如没有专门的作用域和嵌套, 需要定义大量的id/class来保证选择器的准确性, 避免样式混淆;
  • ...

• 所以有一种对CSS称呼是 “面向命名编程”;

• 社区为了解决CSS面临的大量问题, 出现了一系列的CSS预处理器(CSS_preprocessor)

  • CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序;
  • 市面上有很多CSS预处理器可供选择，且绝大多数CSS预处理器会增加一些原生CSS不具备的特性;
  • 代码最终会转化为CSS来运行, 因为对于浏览器来说只识别CSS;

常见的CSS预处理器

• 常见的预处理器目前使用较多的是三种预处理器:
• Sass/Scss
  • 受LESS影响，已经进化到了全面兼容CSS的SCSS
• Less
  • 受SASS的影响较大，但又使用CSS的语法，让大部分开发者更容易上手
  • 比起SASS来，可编程功能不够，不过优点是使用方式简单、便捷，兼容CSS，并且已经足够使用
  • 另外反过来也影响了SASS演变到了SCSS的时代
  • Bootstrap就是采用LESS做底层语言的，也包括React的UI框架AntDesign
• Stylus
  • 主要用来给Node项目进行CSS预处理支持
  • 语法偏向于Python, 使用率相对于Sass/Less少很多