如何在項目代碼中配置環境使用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