使用Compass编译Scss

Compass我觉得是很好用的一款用来编译scss的工具,和scss一样,他使用ruby写的,所以要用ruby安装。ruby安装包去网上就可以下载,几十兆而已,但是我用ruby安装scss和compass就很烦人了,下载资源的服务器被墙了,下不了,所以需要搭梯子,你懂的。

怎样把COMPASS用到自己的项目中

我在官网看到是的是这样的命令

compass create "new project"

这个命令式创建一个项目文件夹,里面有stylesheet文件夹和sass文件夹还有comfig.rb文件。

.sass-cache
stylesheet
sass
ie.scss
screen.scss
print.scss
config.rb

看似人性化,其实一点都不好,我用不到啊!
我有去尝试一下另一个命令:

compass init

我以为这次不会再乱创建文件夹了,结果还是创建了,唯一的不同是不会再生成项目文件夹,而是直接在你当前路径生成这些文件夹,还是没用啊,删除。
看了看compass help 命令提示,最后我终于知道到了不生成文件夹的配置方法:

compass config

这次它就不会生成各种文件夹了,只会帮你在当前路径生成一个config文件夹和一个config.rb:

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

你要做的之间改一改你的config.rb,把哪些参数的值改成你的路径,就可以了哦。比如我的:

http_path = "/"
css_dir = "dist/css"
sass_dir = "style/scss"
images_dir = "images"
javascripts_dir = "dist/js"

然后执行:

compass watch

OK!已经完成监听了,你可以随便写你的scss了,记得保存,后台会自己编译到指定文件夹的。如果找不到配置文件中的文件夹,会自动创建的。

注意事项

你的images_dir参数是你的默认图片保存位置,如果你是用compass的sprite图片功能,比如你的图片放在 images/icon/*.png ,这个时候你在scss文件中引入:

@import "images/icon/*.png";

会报错的,因为你有images_dir参数啊,他会默认帮你加上这个路径的,虽然有点多此一举,所以你应该这么引入:

@import "icon/*.png";

最好在加上一个配置变量,我是这么用的:

$icon-layout: smart; \\用智能模式生成sprite图
@import "icon/*.png";
@include all-icon-sprites; \\生成所有的sprite图样式类