sass02

新建一个文件夹
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\重要数据\桌面\sass\hello\sass ,创建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-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.15\lib\sass

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 */

 

posted @ 2017-06-13 02:17  无天666  阅读(163)  评论(0)    收藏  举报