sass01

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:\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文件
<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;
}