如果你还不知道 SASS 和 COMPASS 是什么,可以参看http://sass-lang.com

http://compass-style.org,近期可能会更新一篇介绍性的入门教程,但

是本文只是安装使用教程,不包含介绍信息。

安装

安装 Ruby

SASS 需要运行在 Ruby 下,进入这个页面,下载最新版本的

rubyinstaller,一路 Next 完成安装。

安装 SASS 和 COMPASS

在开始菜单中找到 “Ruby 1.9.3-p0 -> Start Command Prompt with Ruby”并运行。

输入以下命令

gem install compass

  该命令会自动下载和安装 COMPASS 及其依赖模块(包括 SASS)。

使用

创建一个 COMPASS 项目

在命令行中切换到你需要创建项目的目录,运行:

compass create <projectname>

  

这个命令会创建一个包含一系列文件的目录,其中最重要的是配置文件

config.rb,其他文件如果你不需要都可以删除。

在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。

实时编译 SASS 

文件在命令行下切换到项目目录,运行:

compass watch

  COMPASS 将会实时监控 SASS 目录的文件变化,只要你一保存文件,立即

将相应文件编译为 CSS 文件。

让 Firebug 里显示 SASS 行号

既然现在用 SASS 来开发,我们就需要浏览器开发工具中显示样式对应的

SASS 行号而不是 CSS 行号了。

如果你使用 Firebug 可以安装 FireSass 来解决这个问题。

首先修改 SASS 的配置文件让其在 CSS 文件中输出调试信息,打开项目

目录下的 config.rb,添加一行并保存

sass_options = {:debug_info => true}

  如果你在 watch,结束掉重新运行配置的修改才会生效。

然后下载安装 FireSass后就能看到 Sass 行号了。

$ gem install compass
以前装的时候从来没遇到过问题,可今天却始终不成功,开始以为是权限问题,加上 sudo 之后仍然不行,总是按下回车之后就没有反应了,就以为是被墙了,挂上 VPN 却依然不行。
赶快 Google 一把,发现两个问题:

  • gem 确实被墙了,可以使用淘宝的镜像
  • 使用 $ gem install compass -V,可以输入完整的日志,就不至于长时间没有反应的时候,完全不知道发生了什么

如果仅仅是被墙的话,应该用 VPN 是能安装的,但从日志看,被 302 重定向了好多次,之后就失败了。无奈只好添加了淘宝镜像,终于顺利安装成功。

最新文章

  1. Linux下进程通信的八种方法
  2. 【BZOJ 1497】 [NOI2006]最大获利
  3. 页面滚动动态加载数据,页面下拉自动加载内容 jquery
  4. EL四大作用域 9个jsp对象有效范围 及 对应的类
  5. Android开发之使用广播监听网络状态变化
  6. OC 动态类型和静态类型
  7. 移动端JS判断手势方向
  8. 查找Oracle数据库中的重复记录
  9. Codeforces Round #467 (Div. 1). C - Lock Puzzle
  10. Android Support库——support annotations
  11. java 的序列化和反序列化的问题
  12. [干货,阅后进BAT不是梦]面试心得与总结---阿里、小米、腾讯
  13. C++ code:函数指针参数
  14. Vue系列之 =&gt; 列表动画
  15. 2、CDH 搭建Hadoop在安装(安装Cloudera Manager,CDH和托管服务)
  16. PHP 执行命令时sudo权限的配置
  17. 【转】如何在您的PCB大作上添加二维码?
  18. 安装loadrunner
  19. OpenWrt Web界面修改及功能实现实例说明
  20. VRS外部文件

热门文章

  1. 关于SWT/JFace的API文档
  2. Java获取 JVM 运行信息
  3. jquery自动生成二维码
  4. 无责任比较thrift vs protocol buffers
  5. GIT学习(二)
  6. let 与 expr Shell运算比较 let强强胜出
  7. C#字符串拼接怎么转义背景图片
  8. Java的内存泄漏_与C/C++对比(转载总结)
  9. linux系统文件属性
  10. HDU 1069 Monkey and Banana(动态规划)