安装和使用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' (>= ), 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. (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写出来的样式结构，不仅层次分明，意思明确，而且编码量明显减少。