SCSS 初级使用

1. 安装 ruby

   On Windows machines, you can use RubyInstaller

   NOTE: Centos install gem, run sudo yum install ruby-rdoc ruby-devel

   yum install rubygems
   

2. 替换 gem 镜像源 (ruby.taobao.org)

   gem sources -l
   gem sources -r http://rubygems.org/
   gem sources -a http://ruby.taobao.org/
   gem sources -c
   

3. 安装compass,在命令行中输入

   gem install compass
   

4. 创建测试项目 'myproject'

   compass create myproject --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "images"
   

5. 进入到 'myproject' 目录, 并打开 config.rb 文件。列出了常用的配置参数:

   http_path = "/"
   css_dir = "css" #生成的css目录
   sass_dir = "sass" #需要编译的scss目录
   images_dir = "images" #需要编译的图片目录
   javascripts_dir = "js" #js目录,没什么用
   output_style = :expanded #(:nested、:compact和:compressed)
   line_comments = false;#是否生成注释
   #environment = :development  #（:production或者:development），智能判断编译模式。
   

6. 新建一个test.scss文件，然后输入以下命令就可以一边编译一边生成css文件了

   【ps:记得在当前窗口运行命令，否则会找不到 config.rb 配置文件】

   compass watch
   

   Linux, osx 用户可用这个脚本启用后台监听程序: sass-watch

7. scss语法文档

基本语法入门教程：http://www.w3cplus.com/sassguide/