天行健, 君子以自强不息
Sunny's Blog
Title

sass(2):sass,compass项目如何建立和编译,调试

本文只适合快速阅读,查找用,是多篇文章和自己理解的结合。详细学习推荐阮一峰老师的文章Compass用法指南

1.compass项目的建立

compass create myproject,当前目录中就会生成一个myproject子目录。里面有一个config.rb文件,这是你的项目的配置文件。还有两个子目录sass和stylesheets,前者存放Sass源文件,后者存放编译后的css文件。也可以改变sass和stylesheets的名字和路径,只要在config里面配置好。

2.Compass的编译命令

compass compile --output-style compressed(css文件压缩,:expanded模式表示编译后保留原格式,其他值还包括:nested、:compact和:compressed)。compass还有自动编译命令compass watch

3.sass的调试

利用sourcemap的cmd命令,sass --sourcemap --style compact --watch assets/style/sass:assets/style/css,chrome开启F12打开调试面板,点击调试面板右上角的齿轮图标打开设置,在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS。在chrome中就可以调试scss了,并且可以直接保存。

但是这里有遇到一个问题还没有解决,就是在scss文件中如果有@import "compass";那么在sourcemap的时候会报错:file to import not found or unreadable:compass.这里待续。

(2014/04/19)这个问题有一个解决方法:在config.rb里面添加,enable_sourcemaps=true和sass_options = {:sourcemap => true},然后用命令compass watch命令,不用sass --sourcemap了,也可以在浏览器直接调sass样式。

地势坤,君子以厚德载物