安装和使用sass

在安装和使用sass以前，须要一些准备条件：

1. 文件夹---存放.scss 或 .sass；

2. 编辑器，咱们推荐使用Sublime Text 2 或者 3；

3. 你的电脑须要安装Ruby，由于sass是依赖于Ruby的。ruby下载地址http://rubyinstaller.org/downloads/

使用命令行安装sass：

gem install sass

出现错误：

C:\Users\zhaoliang>gem install sass
ERROR:  Could not find a valid gem 'sass' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server 
certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)

命令换成：gem install sass --source http://rubygems.org

使用命令，查看是否安装成功，以下显示表示安装成功：

C:\Users\zhaoliang>sass -v
Sass 3.4.22 (Selective Steve)

简单使用Sass

在sass文件夹下建立demo1.scss文件，内容：

$myColor: #ccc; #page { color: $myColor; }

使用命令行：

sass demo1.scss demo1.css

会在同一个文件夹下生成一个demo1.css文件，内容：

#page { color: #cccccc; }

提升生产力的Sass

以下，在学习sass以前咱们大概都是这么来写css的：

ul.nav {float: right} ul.nav li {float: left;} ul.nav li a {color: #111} ul.nav li.current {font-weight: bold;}

但，有了sass后，那就方便多了：

ul.nav {  float: right; li {  float: left; a {  color: #111; } &.current { font-weight: bold; } } }

经过编译，获得css：

ul.nav { float: right; } ul.nav li { float: left; } ul.nav li a { color: #111; } ul.nav li.current { font-weight: bold; }

除了排版不同以外，再也看不出有什么区别。但使用sass写出来的样式结构，不只井井有条，意思明确，并且编码量明显减小。