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图样式类