(二)sass和compass的配置

安装完sass和compass后创建工程
执行编译compass compile
实时监控sass文件的变换compass watch
sass文件和scss文件的装换，进入其所在文件夹sass-convert .sass/.scss .scss/sass
compass create我们会看到几个文件，但在真正的项目中不会使用默认的
compass create -sass-dir "sass" -css-dir "css" -javascripts-dir "js" -images-dir "img"这样可以在创建的同时自定义文件名
compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"
这个命令只创建sass文件夹而不创建sass里的文件然后一键创建文件mkdir img js css; touch index.html js/main.js js/plugin.js

理解config.rb

require 'compass/import-once/activate'

# Require any additional compass plugins here.
# （↑的意思）给工程添加插件
# 使用方法require "susy"
# Set this to the root of your project when deployed:
# 把路径设置到工程根目录下
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# 嵌套输出风格
# output_style = :nested
# #main{
# color: #999;
# .content {
# color: #333;
# }
# }
# #main{
# color: #999;
# }
# #main .content{
# color: #333;
# }
#
# 紧密输出方式
# output_style = :compact
# #main{
# color: #999;
# .content {
# color: #333;
# }
# }
# #main{color: #999; }
# #main .content{ color: #333; }
#
# 压缩输入方式
# output_style = :compressed
# #main{
# color: #999;
# .content {
# color: #333;
# }
# }
# #main{color: #999; } #main .content{ color: #333; }
#
# To enable relative paths to assets via compass helper functions. Uncomment:
# （↑的意思）通过compass帮助工具打开资源相对路径功能，去掉前面的#
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# （↑的意思）想关闭显示在选择器原始为之前的调试注释，去掉前面的#
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass