Chrome --流行的浏览器，及前端开发调试工具 WebStorm --强大的跨平台前端集成开发环境 Sublime Text --神器级别的代码编辑器，如vim般强大，而上手难度极低。 --------------------------------------- 为什么需要CSS预处理器？ 如果最终生成的是CSS代码，为什么不干脆写CSS？ 为什么使用Sass？ 使用变量 自动转换RGBA颜色值 忘记浏览器前缀 嵌套规则 media query更简单 自动压缩CSS http://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语言，安装rubby https://rubyinstaller.org/downloads/ rubby安装后gem看安装是否成功，如果不成功把C:Ruby22in加入环境变量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文件 <link rel="stylesheet/less" type="text/css" href="文件路径/styles.less"> <script src="文件路径/less.js" type="text/javascript"></script> 服务器安装：先安装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; }