Sass与Compass学习环境搭建

1. Sass与Compass安装

1.1. 安装Ruby

我目前学习用的是window7系统，因此只介绍windows下的安装。去网址http://rubyinstaller.org/downloads/下载最新版本的Ruby安装程序并运行。按提示安装过程中，在第三个窗口点击选中中间复选框，如图：

然后，就可以在开始->程序中看到Ruby程序了，打开Start Command Prompt with Ruby.

1.2. 安装SassCompass

输入:

gem install sass 
gem install compass

如果安装不成功，那么可能是由于网络的原因，因此需要换一个国内的镜像。之前国内的Ruby镜像一直是淘宝在维护，就是这个https://ruby.taobao.org/，不过好像目前不维护了（意思就是没法使用了）,现在国内使用的是https://gems.ruby-china.org/，输入：

gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/

替换镜像的时候，可能会出现如图情况

这个可能是https的缘故（具体原因我也不太清楚），但把 https 换成 http 就可以了。然后输入：

gem sources -l
https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org 如图

然后再次输入：

gem install sass
gem install compass

// 安装完成之后，看看是否成功
sass -v
compass -v

好了，Sass与Compass就完成了。

2. 新建Compass项目

2.1 创建Compass工程

• 创建默认工程
  在命令行输入：

  compass create 项目名称

  好了，一个compass项目就创建成功了，目录如下：
  

• 创建定制化的Compass工程
  在命令行输入：

  compass create 项目名称 --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"

  目录如下：
  

• 创建空的Compass工程
  命令行输入：

  compass create 项目名称 --bare --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"

  目录如下：
  

创建完Compass工程之后，我们还要根据项目需要新建一些文件夹（js、css、img）与文件（index.html、js/main.js），最终的项目目录大概是这样的（视个人项目需要）：

2.2 理解config.rb文件

config.rb文件内容：

# 导入其他compass插件.
require ""

# 部署时把以下路径设置为工程根目录
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

# 根据个人偏好选择输出样式
# output_style = :expanded or :nested or :compact or :compressed
output_style = :expanded

# 想通过compass帮助工具打开资源相对路径功能，去掉下面注释前的“#”
# relative_assets = true

# 想关闭显示在选择器原始位置前的调式注释，去掉下面注释前的“#”
line_comments = false

# 下面的内容和sass的缩进语法有关，感兴趣的自行阅读，这里不做介绍
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

下面对config.vb文件进行详细介绍

• 添加需要的插件
  如何插件都可以通过 require "" 方式添加

• 设定名称和路径

# 部署时把以下路径设置为工程根目录
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

上面这些路径都是相对于HTTP的路径，所以只要HTTP路径保持在根目录下（根目录用‘/’表示）,其他文件夹的路径都是相对于这个跟目录的路径。
例如，你需要给工程添加Web字体，在css/fonts下存储字体文件，那么你需要添加下面的代码：

fonts_dir = "css/fonts"

• 设定CSS输出样式

  • 默认输出方式

      // 将config.vb文件不设置或者设置为：
      output_style = :expanded 
      
      // sass文件
      .main {
       color : #000;
       .content {
           color : #aaa;
       }
      }
      
      // css文件
      .main {
       color : #000;
      }
      .main .content {
       color : #aaa;
      }

  • 嵌套输出方式

    // 将config.vb文件设置为：
      output_style = :nested
      
      // sass文件
      .main {
       color : #000;
       .content {
           color : #aaa;
       }
      }
      
      // css文件
      .main {
       color : #000;}
       .main .content {
           color : #aaa;}

  • 紧密输出方式

    // 将config.vb文件设置为：
      output_style = :compact
      
      // sass文件
      .main {
       color : #000;
       .content {
           color : #aaa;
       }
      }
      
      // css文件
      .main { color : #000;}
      .main .content {color : #aaa;}

  • 压缩输出方式

    // 将config.vb文件设置为：
      output_style = :compressed
      
      // sass文件
      .main {
       color : #000;
       .content {
           color : #aaa;
       }
      }
      
      // css文件
      .main {color : #000;}.main .content {color : #aaa;}

  • 去掉注释

    // 将config.vb文件设置为：
    # 想关闭显示在选择器原始位置前的调式注释，去掉下面注释前的“#”
      line_comments = false

  • 凸显注释

    // 在压缩CSS文件下，又需要添加注释，那么就要用凸显注释了
    // sass文件
    /*! 凸显注释内容 */
    .main {
        color : #999;
        .content {
            color : #aaa;
        }
    }
    
    // CSS文件
    /*! 凸显注释内容*/.main{color:#999;}.main .content{color:#aaa;}

  • 相对资源路径功能

    // 设置
    # 想通过compass帮助工具打开资源相对路径功能，去掉下面注释前的“#”
      relative_assets = true
      
      // 那么在sass文件中只需要
      background-image: image-url('image.png');
      
      // 生成的CSS文件就变成了
      backgroun-image: url('../img/image.png');

好了，项目环境已经搭建好了，在正式开始之前，还有一点需要注意的。

3. 项目监控

对config.vb文件修改之后，需要先清理.sass-cache文件夹。在命令行输入:

compass clean

当然，你也可以手动删除.sass-cache文件夹。  

开启监控

在命令行输入：

compass watch