sass+compass起步

  前言:Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variablesnested rulesmixinsinline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.——《摘自sass官方文档》

  所以我们使用sass+compass组合。(本文只讲windows环境,因为工作电脑是WIN)

  1、ruby环境安装

  sass依赖ruby环境,官网(http://rubyinstaller.org/downloads/)下载合适的版本的ruby,安装时注意在选择路径的那一步勾选Add Ruby executables to your PATH.

  2、sass安装

  在菜单中打开Start Command Prompt with Ruby,运行命令来安装sass:

gem install sass   //安装sass
sass -v            //查看sass版本号
sass -h            //查看sass命令

  3、compass安装

gem install compass  //安装compass
compass version      //查看compass版本号

  基本环节配置好之后就可以小试身手了。

  4、启动项目

compass create <myproject>

  会生成一个名为<myprject>的文件夹,目录结构如下:

  5、编译

  compass是懒编译——只编译有改动的文件。

compass compile //手动编译sacc文件为css文件
compass watch //监控scss文件,有改动的时候自动编译为css

  剩下的事情就是熟悉sacc语法及compass的各大模块,compass之于css就像jquery之于javascript,了解sacc基本语法之后,使用compass来干活,事半功倍。

附录:

1、compass基本命令:

Primary Commands:
  * clean       - Remove generated files and the sass cache
  * compile     - Compile Sass stylesheets to CSS
  * create      - Create a new compass project
  * init        - Add compass to an existing project
  * watch       - Compile Sass stylesheets to CSS when they change
Other Commands:
  * config      - Generate a configuration file for the provided command line options.
  * extension   - Manage the list of compass extensions on your system
  * frameworks  - List the available frameworks
  * help        - Get help on a compass command or extension
  * imports     - Emit an imports suitable for passing to the sass command-line.
  * install     - Install an extension's pattern into your compass project
  * interactive - Interactively evaluate SassScript
  * sprite      - Generate an import for your sprites.
  * stats       - Report statistics about your stylesheets
  * unpack      - Copy an extension into your extensions folder.
  * validate    - Validate your generated css.
  * version     - Print out version information

2、sacc中文文档http://sass.bootcss.com/docs/sass-reference/

3、compass官方文档http://compass-style.org/reference/compass/support/

posted @ 2016-08-18 23:40  lovelyun  阅读(228)  评论(0编辑  收藏  举报