新建一个文件夹
1 cd 进入文件夹 ,cd E:360data重要数据桌面sass,
2 compass creat hello:当前目录创建sass工程,
3 sass文件夹放置sass文件,stylesheets生成的css文件,
4 compass create --bare --sass-dir "sass" --css-dir "css" --images-dir "img" --javascripts-dir "js" 指定创建的目录
5 E:360data重要数据桌面sasshellosass ,创建demo1.scss文件写样式,编译sass demo1.scss demo1.css编译成css文件,
6 sass -watch demo1.scss:demo1.css当scss文件变化的时候css文件自动变化
7 compass compile 编译文件 compass watch 监视文件的变化
8 config.rb:config.rubby文件,定义了一些路径。
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):输出风格
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment: 是否使用绝对路径
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:是否使用注释
# line_comments = false
9 中文注释
Encoding.default_external = Encoding.find('utf-8')
engine.rb文件路径:
C:Ruby22-x64lib
ubygems2.2.0gemssass-3.4.15libsass
demo1.scss
body{ background: lightgray; font-size: 14px; margin:0px; margin-left:0px; // this is the header style. header{ font-weight: bold; } footer{/*! This is the footer style.重要注释,压缩模式也会编译到css文件*/ text-align: center; } }
demo1.css
@charset "UTF-8"; body { background: lightgray; font-size: 14px; } body header { font-weight: bold; } body footer { /*! This is the footer style.重要注释,压缩模式也会编译到css文件*/ text-align: center; } /*# sourceMappingURL=demo1.css.map */