TOP

安装和使用 SASS 和 Compass

发布时间： 2013-11-02

#### 安装 Ruby

下载安装包后安装，安装过程略。

[https://www.ruby-lang.org/zh_cn/downloads/](https://www.ruby-lang.org/zh_cn/downloads/)

#### 安装 SASS

SASS 是一种用 Ruby 开发的 CSS 预处理器语言，它可以让我们像编程语言一样去编写 CSS，能够很方便地处理复杂的 CSS。

安装：

$ gem install sass

卸载：

$ gem uninstall sass

#### 安装 Compass

Compass 是 Sass 的扩展包，封装了一些常用的 mixin 和函数等模块。

由于 GFW 的原因，你懂的，所以无法从 AWS 上下载 gem 包，这时需要切换到国内的源，这时使用淘宝的源：

$ gem sources -a http://ruby.taobao.org/
	http://ruby.taobao.org/ added to sources

开始安装 Compass：

$ gem install compass

Fetching: multi_json-1.10.1.gem (100%)
	Successfully installed multi_json-1.10.1
	Fetching: compass-core-1.0.1.gem (100%)
	Successfully installed compass-core-1.0.1
	Fetching: compass-import-once-1.0.5.gem (100%)
	Successfully installed compass-import-once-1.0.5
	Fetching: chunky_png-1.3.3.gem (100%)
	Successfully installed chunky_png-1.3.3
	Fetching: rb-fsevent-0.9.4.gem (100%)
	Successfully installed rb-fsevent-0.9.4
	Fetching: ffi-1.9.6-x64-mingw32.gem (100%)
	Successfully installed ffi-1.9.6-x64-mingw32
	Fetching: rb-inotify-0.9.5.gem (100%)
	Successfully installed rb-inotify-0.9.5
	Fetching: compass-1.0.1.gem (100%)
	    Compass is charityware. If you love it, please donate on our behalf at http://umdf.org/compass Thanks!
	Successfully installed compass-1.0.1
	Parsing documentation for multi_json-1.10.1
	Installing ri documentation for multi_json-1.10.1
	Parsing documentation for compass-core-1.0.1
	Installing ri documentation for compass-core-1.0.1
	Parsing documentation for compass-import-once-1.0.5
	Installing ri documentation for compass-import-once-1.0.5
	Parsing documentation for chunky_png-1.3.3
	Installing ri documentation for chunky_png-1.3.3
	Parsing documentation for rb-fsevent-0.9.4
	Installing ri documentation for rb-fsevent-0.9.4
	Parsing documentation for ffi-1.9.6-x64-mingw32
	Installing ri documentation for ffi-1.9.6-x64-mingw32
	Parsing documentation for rb-inotify-0.9.5
	Installing ri documentation for rb-inotify-0.9.5
	Parsing documentation for compass-1.0.1
	Installing ri documentation for compass-1.0.1
	WARNING:  Unable to pull data from 'https://rubygems.org/': SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://rubygems.org/latest_specs.4.8.gz)
	.....
	8 gems installed

忽略警告，输入命令检查是否安装成功：

$ compass -v
	Compass 1.0.1 (Polaris)
	Copyright (c) 2008-2014 Chris Eppstein
	Released under the MIT License.
	Compass is charityware.
	Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

#### 使用 SASS

编译 SCSS：

$ sass xxx/xxxx.scss xxx/xxxx.css

# 参数说明
	
	--scss		表示源码使用SCSS风格
	--style		表示输出风格，默认值为 nested（保留缩进），还有 compressed（压缩代码）、compact（紧凑的代码）、expanded（保留原格式）
	--watch		表示监控文件变化，自动编译 SASS ，命令格式：
				sass --watch input.sass:output.css
				sass --watch input-dir:output-dir
	--force		SASS 默认只编译变动的文件，如果需要重新编译未变动的，需要使用这个参数
	-E			设定源文件的默认字符编码

在命令行编写 Sass / Scss：

$ sass -i

#### 使用 Compass

创建项目：

$ compass create projectName
	$ cd projectName

生成以下文件和目录：

./
		config.rb
		/sass
		/stylesheets

[`config.rb`](https://github.com/thesassway/sass-test/blob/master/config.rb) 的内容如下，可以根据需要更改配置：

http_path = "/"
	css_dir = "stylesheets"
	sass_dir = "sass"
	images_dir = "images"
	javascripts_dir = "javascripts"

编译命令：

$ compass compile

#参数：设定输出风格 --output-style compressed

Compass 只会编译发生变动的文件，如果你要重新编译未变动的文件，需要使用 `--force` 参数：

$ compass compile --force

也可以通过在 `config.rb` 中设置编译输出的风格和其他选项：

environment  = :development
	output_style = (environment == :production) ? :compressed : :expanded

:expanded		表示编译后保留原格式
	:nested			表示保留缩进
	:compact		表示紧凑的
	:compressed		表示压缩的，适用于生产环境

监测文件变动，自动编译 SASS 文件：

$ compass watch

查看其他命令和帮助：

$ compass -h

#### 相关资料

- Sass用法指南	 [http://www.ruanyifeng.com/blog/2012/06/sass.html](http://www.ruanyifeng.com/blog/2012/06/sass.html)
- Compass用法指南 [http://www.ruanyifeng.com/blog/2012/11/compass.html](http://www.ruanyifeng.com/blog/2012/11/compass.html)
- Compass官方示例 [http://compass-style.org/examples/](http://compass-style.org/examples/)
- Compass官方帮助文档 [http://compass-style.org/help/](http://compass-style.org/help/)

TOP