前言:Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline 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/