Chrome --流行的浏览器，及前端开发调试工具WebStorm --强大的跨平台前端集成开发环境Sublime Text --神器级别的代码编辑器，如vim般强大，而上手难度极低。---------------------------------------为什么需要CSS预处理器？ 如果最终生成的是CSS代码，为什么不干脆写CSS？ 为什么使用Sass？使用变量自动转换RGBA颜色值忘记浏览器前缀嵌套规则media query更简单自动压缩CSShttp://sass-lang.com/CSS并不能算是一门真正意义上的“编程”语言，无法完成嵌套、继承、设置变量等工作 解决CSS的不足，开发者想到了编写一种对css进行预处理的“中间语言”------------------------------------Sass是css的预处理器，Compass是Sass的工具库。Sass是css3的扩展方向。在Sass的基础上封装了一系列有用的模块和模板，补充Sass的功能Compass与Sass的关系类似于jQuery与JavaScript的关系-----------------compass、sass安装http://compass-style.org/install/https://www.sass.hk/install/基于rubby语言，安装rubbyhttps://rubyinstaller.org/downloads/rubby安装后gem看安装是否成功，如果不成功把C:\Ruby22\bin加入环境变量path,gem install compass 安装不成功 使用 https://github.com/ruby-china/Ruby China 官方搭建的 RubyGems 镜像网站，此仓库是服务器源代码：http://sh0.gems.ruby-china.org 就能安装compass了。https://ruby.taobao.org/已经不再维护了。compass依赖sass,安装conpass就会安装sass,-----------------Sass：现在兼容css语法，强大的库，Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用，也就是说它本身的语法并不太容易让浏览器识别，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。Less：人气最高，最先兼容css语法，是最大的预处理器，2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了。其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更佳方便，Alexis开发了LESS并提供了类似CSS的书写功能。Stylus：Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。 Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。----------------------1、Sass需要安装Ruby，然后通过gem安装sass 2、Less有两种安装方式：客户端安装：引入less.js，然后就可以直接使用.less文件
        服务器安装：先安装node，然后使用npm安装less。3、Stylus的安装类似于Less的服务端安装，用npm安装。---------------------------1、三者都是开源项目；2、Sass诞生是最早也是最成熟的CSS预处理器，有Ruby社区和Compass支持；Stylus早期服务器Node JS项目，在该社区得到一定支持者；LESS出现于2009年，支持者远超于Ruby和Node JS社区；3、Sass和LESS语法较为严谨、严密，而Stylus语法相对散漫，其中LESS学习起来更快一些，因为他更像CSS的标准；4、Sass和LESS相互影响较大，其中Sass受LESS影响，已经进化到了全面兼容CSS的SCSS；5、Sass和LESS都有第三方工具提供转译，特别是Sass和Compass是绝配；6、Sass、LESS和Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性，而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性，各自特性实现功能基本相似，只是使用规则上有所不同；7、Sass和Stylus具有类似于语言处理的能力，比如说条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能，在这一方面略逊一层；---------------------------------------------------------------------------------sass:h1    color:red;//变量定义$color:red;//嵌套body{    head{    }    section{    }}------------------------------------------------scss:h1{    color:red;}//变量定义$color:red;//嵌套body{    head{    }    section{    }}//函数@mixin alert($color:blue){//blue是默认值    color:$color;}//继承.block{    margin:10px;    padding:5px;}p{    @extend .block;}------------------------------------------------less:h1{    color:red;}//变量定义@color:red;//嵌套body{    head{    }    section{    }}//函数.alert(@color:blue){//blue是默认值    color:@color;}//继承.block{    margin:10px;    padding:5px;}p{    .block;}------------------------------------------------Stylus:h1{    color:red;}h1     color:red;h2     color red;//变量定义$color:red;color:red;//嵌套body{    head{    }    section{    }}//函数alert($color = blue){//blue是默认值    color:$color;}//继承.block{    margin:10px;    padding:5px;}p{    @extend .block;}