一.css预处理器出现的原因

1.无法嵌套书写导致代码繁重、冗杂、逻辑混乱。

2.没有变量和样式复用机制，属性值只能以字而量的形式重复输出(只能写color:red)。

总结：代码复用性低，不易维护
注：现在的css是可以定义变量的

二.出名的css预处理器介绍

1.SCSS/SASS

SASS(,scss)。于2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一 最强大的css框架， 目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

2.LESS

LESS (.less)。于2009年诞生，借鉴了SASS的长处，并兼容了CSS语法，使得开发者使用起来更为方便顺手，但是相比于SASS,其编程功能不够丰富，反而促使SASS进化成为了SCSS。

3.Stylus

stylus (.sty)。于2010年诞生, 出自Node.js社区,主要用来给Node项目进行CSS预处理支持,人气较前两者偏低。

三、使用CSS预处理器的优劣

1.优点

CSS预处理器为CSS增加线编程的特性，无需考运浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让:CSS更加简洁、提高代码复用性、逻辑分明等等

2.缺点

CSS的文件体积和复杂度不可控:增加了调试难度和成本等。

四 选择SCSS的原因

1.官方介绍

sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables)、 嵌套(Cnested rules)、 混合(mixins)、 导入(inTine imports) 等高级功能，这些拓展令CSS更加强大与优雅。使用Sass以及Sass的样式库(如Compass) 有助于更好地组织管理样式文件，以及更高效地开发项目。

2.特色功能

  • 完全兼容CSS3
  • 在CSS基础上增加变量、嵌套(nesting)、混合(mixins)等功能
  • 通过函数进行颜色值与属性值的运算
  • 提供控制指令(control directives)等高级功能
  • 自定义输出格式