前言
有機會接觸到一個舊專案，裡面有個 config.rb 檔與其他 .scss 與 .css 檔，看了結構心裡超了很大的好奇心，想試著找資料與看看是不是可以將電腦環境建起來看看，可不可以將舊專案在現今的電腦上運作看看。
舊專案的結構與運作環境了解
這個 Scss 專案是不是就是和 config.rb 檔相依所產生的。查了一下 config.rb 檔是由一個名為 Compass 工具的設定檔，而這個工具主要是用來將 Sass/Scss 轉譯 css 的工具。
卡期伯 – 前端沒有極限 – CSS沒有極限 – Sass 與 Compass(1) 一文簡介 (看了文章日期 2013-09-20 @@!!!)，這個 Compass 工具是基於 Ruby 所編寫，也一定要有 Ruby 的環境才可以讓 Compass 工具運作。
MacOS 安裝 Ruby 與雷的處理
MacOS 環境 HomeBrew 安裝 Ruby 的問題
MacOS 系統中預設有 Ruby 的環境原先還不知道，一開始直接透過 HomeBrew 裝上最新版的 Ruby，但就有著自已無法解決的問題。主要是使用 brew 安裝的 Ruby ( /usr/local/Cellar/ruby/3.0.0_1) 會與新版 MacOS 終端機用的 ZSH 指向程式有問題，之後所裝的 Campass 會因為有系統預設 Ruby 是使用 ZSH ，而透過 Brew 所載下的 Ruby 指向是是 bash，這裡會有路徑對不上的問題，上網爬了不少文也還沒能解決這個問題。
資料來源：You don’t have write permissions for the /Library/Ruby/Gems/2.3.0 directory.
使用指令 which ruby 查看。
brew install ruby，然後在 .bash_profile 或 .zshrc 中加入新 Ruby 的路徑： export PATH="/usr/local/opt/ruby/bin:$PATH"。最後可使用 which ruby，若結果不是 /usr/bin/ruby，則確定成功切換至新 Ruby。
1 | sudo gem install campass |
以上只能算了解，但還是無法將 Ruby 做正確設定，透過指令 sudo gem install campass 都像是裝到新版上的 Ruby，而指令指向是系統預設舊版 Ruby，這樣也都無法正確的使用到 campass 工具，透過 campass -v 指令也一直列不出版別 (無法使用會一直以 You dont have write permissions for the /usr/bin directory. 回應)。
gem (RubyGems 官方連結) 是 Ruby 下的一個套件安裝工具包，透過 gem 指令就可以載下 Ruby 下的工具下來使用。
參考來源：使用套件（Gem）讓開發更有效率
解決 MacOS 安裝 Ruby 問題，安裝 rvm
懶的在解 HomeBrew Ruby 的問題，直接使用 brew uninstall ruby 移除。
移除後問題一樣，針對 Camposs 一樣無法安裝與使用指令，這也還是因為無法將 camposs 在指定的 Ruby 環境下運作，另外找到一文是使用 RVM (Ruby Version Manager) 來管理 Ruby 版本，也改裝 RVM 來試看看 Ruby 是不是可以正常運作。
參考資料：
為你自己學 Ruby on Rails – 環境設定
Ruby on Rails install on Mac 安裝步驟
1 | \curl -sSL https://get.rvm.io | bash -s stable |
安裝過程式很久…慢慢等約會十來分鐘，載完 RVM 後就可以載下不同的 ruby 版別，使用指令 rvm list known 查看目前線上有的 Ruby 版本。
輸入版別時無法直接透過模糊數值直接下戴，例如輸入 3 直接下戴 3.0.0 版，需要將後面二個小數點與數值都帶完整。
透過安裝版別指令，在還沒安裝 Ruby 的 rvm 是空的，如果是第一次裝的版別會成為預設 (default)，在這裡先以 3.0.0 版為主。
1 | rvm install 3.0.0 |
安裝後 使用 rvm list 指令看一下使用狀態，另外要確任 Ruby 切換與使用情形使用指令 ruby -v 查看是不是回應 3.0.0 版號，到此的話就可以讓 Ruby 正常執行 gem 安裝要的工具套件。
Ruby 特定版別的 rvm 下，需各自安裝 compass 工具套件
切換到 Ruby 指定版別後，裡面是不會有 compass 工具套件，需要在透過 gem 指令安裝 compass，指令如下：
1 | gem install compass |
安裝 compass 後再接著輸入 compass -v 查看是不是有將工具安裝起來，沒問題的話就會回應下面內容。
1 2 3 4 5 | Compass 1.0.3 (Polaris) Copyright (c) 2008-2021 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass |
整個使用 rvm 與 nvm 的管理工具概念很相近， gem 也等同於 npm 的使用。
使用 Compass 於專案資料夾中
對於 Compass 的使用，可以參考下面的文章：
oxxostudio – SCSS 安裝與執行
可以命名一個 compass 空的資料夾，裡面下 compass 初始化專案指令。
在專案下使用指令引用 compass，在compass 空的資料夾下指令將 compass 初始， compassTest 為專案名稱，裡面會在建一個 compassTest 的資料夾。。
1 2 | compass create <專案名> compass create compassTest |
輸入指令後專案資料夾會產生下面的結構：
/.sass-cache：Scss 編譯暫存工作資料夾。
/compassTest/config.rb：Compass 設定檔。
/compassTest/sass： .scss 與 .sass 程式碼源資料夾。
/compassTest/stylesheets：CSS 輸出目的資料夾。
資料夾路徑設定如下，更多可以了解30天掌握Sass語法 – (23) 介紹Sass與Compass的config.rb設定文章。
1 2 3 4 5 | http_path = "/" /你的根目錄位置 css_dir = "stylesheets" /你的CSS資料夾路徑 sass_dir = "sass" /你的Sass資料夾路徑 images_dir = "images" /你的圖片資料夾路徑 javascripts_dir = "javascripts" // 你的js資料夾路徑 |
到這裡，就可以專注處理 SCSS 與 CSS 了。
小結
這東西看了所找到的資料都是有點時間 (舊資料)，而整個安裝過程與所戴下工具與環境的所需時間過多，如果不需要一定由 Ruby 執行 Sass 編譯的話，我想還是以能快速開發的其他套件為主。
Comments are closed.