如何在项目代码中配置环境使用sass

Tip：Sass是一种"CSS预处理器"，使用Sass能够有效提升CSS的开发效率，Compass是一个使用了Sass的库，封装了一系列有用的模块和模板，Compass是用Ruby语言开发的，所以安装它之前，必须安装Ruby

安装Ruby

默认情况下。macOS是默认安装好Ruby

在命令行下可以直接通过以下命令，确认系统 Ruby 的版本信息：

$ ruby --version
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]

但是，由于默认的 Ruby 安装在 /System 目录下，对日常的开发、维护都带来许多不便。

推荐使用 homebrew 来安装、管理 Ruby 的版本

安装homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Tip:刚开始使用了一下命令报错，注意要进入ruby安装所在的目录/usr/bin/ruby执行命令

$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
curl: (22) The requested URL returned error: 404 Not Found

brew安装Ruby的最新版本

brew update
brew install ruby

查看当前Rudy的版本

$ ruby --version

安装compass

gem install compass

使用compass来创建Sass工程

compass create my-project

安装成功的提示

directory my-project/
directory my-project/sass/
directory my-project/stylesheets/
   create my-project/config.rb
   create my-project/sass/screen.scss
   create my-project/sass/print.scss
   create my-project/sass/ie.scss
    write my-project/stylesheets/ie.css
    write my-project/stylesheets/print.css
    write my-project/stylesheets/screen.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

sass目录中就是对应的源文件目录，当我们在该目录下进行代码的编写，通过以下命令来进行编译

编译sass

$ compass compile