Sass Compass sprite 的使用

前端开发

• 系统环境 ： windows 64x
• ruby版本 ： 2.0.0p481
• compass版本 ： 0.12.6
• sass版本 : 3.3.7

安装相关套件

compass 是ruby家族的一个前端开发插件，所以在使用compass之前务必安装ruby套件.

1.检查自己的电脑是否安装了ruby套件

• DOS下输入 ruby -v查看ruby版本信息
  如果不显示版本好则表明你没有安装ruby，这里需要保证你的ruby版本不低于1.8.7，如果低了就需要重新安装
• DOS下输入 compass version 查看compass版本信息
• DOS下输入 sass --v查看sass版本信息

ruby下载

2. 安装Sass和Compass插件

Ruby自带了一个包管理其gem，我们直接使用gem去安装Ruby的相关包(插件)就可以了。

• $ gem install sass 安装Sass
• $ gem install compass 安装Compass

创建项目

在你希望创建项目的目录下，DOS输入 $compass create <projectName> 这样一个基本的sass项目目录就创建出来了

• 创建项目中的其他配置参数

  --bare {不包含默认样式表进行安装}
  --syntax sass {在默认样式表中使用缩进语法}
  --sass-dir 'sass' {使用sass目录存放Sass文件}
  --css-dir 'css' {使用css目录存放CSS文件}
  --images-dir 'img' {使用img目录存放image文件}
  --fonts-dir 'font' {使用font目录存放字体文件}
  --Javascripts-dir 'js' {使用 js目录存放Javascript脚本文件}

• 举个栗子：

$ compass create sassProject --bare --sass-dir "sass" --css-dir "css" javascripts-dir "js"

compass指令

sass是一门CSS预处理的语言，所以在使用前我们还需要将sass编译成相关的CSS文件或cass文件

compass create --- 创建一个新的compass项目
compass init --- 为一个已经存在的项目(Rails)添加compass
compass clean --- 移除生成的文件和缓存
compass compile --- 编译生成样式表和文件
compass watch --- 监视Sass的文件改变，如果有变化则只需complie
compass stats --- 查看样式表的统计数据
compass unpack --- 解压扩展到自己的项目中
compass validate --- 验证生成的CSS文件
compass version --- 显示compass的版本，许可等版本信息
compass interactive --- 进入一个用于测试Compass中SassScript控制台