Mac & Window 打造 Sass + Compass 環境（ 建立 Compass 專案）

Step1 : Ruby 環境

因為 Sass 是由 Ruby 程式語言寫成，所以必須從 Ruby 環境下安裝

Mac：

由於已經安裝好了Ruby，所以只要直接開啟終端機 Terminal 輸入

$ gem update --system" //先更新 gem

$ gem install compass" // 安裝 Compass

由於用 SASS 的都會搭配 Compass 使用，所以可以直接裝 Compass，電腦會自動安裝 Sass

如果出現錯誤訊息 : ERROR:  While executing gem ... (Gem::FilePermissionError) 則改輸入：

$ sudo gem update --system"

用意為提高執行權限，此時會要求輸入電腦管理者密碼。

Window：

Windows 必須先安裝 Ruby，請至 RubyInstaller 下載安裝程式，跟著軟體指令安裝完成後，開啟 Ruby 的命令提示字元（以管理員的權限開啟），執行以下指令確定是否有安裝成功：

ruby -v

顯示結果會出現 Ruby 的版本，那就說明你成功了。

接下來可以下與 Mac 相同指令，先更新 gem 再安裝 Compass 。

$ gem update --system" //先更新 gem

$ gem install compass //安裝 Compass

由於用 SASS 的都會搭配 Compass 使用，所以這直接裝 Compass，電腦會自動安裝 Sass

Step2 : 建立 Compass 專案

接下來 Mac 皆與 Window 皆輸入同樣的指令

先指定到要建立專案的目錄，例如已在 D:\ 開了一個資料夾稱 Text 放專案

$ cd d:/Text                      //先把位置指定到目錄下

再建立專案文件

$ compass creat project    //建立專案，“project” 是自訂的專案名稱

接下來就可以看見 Text 資料夾下已建立以下檔案


為了使SASS順利編譯成CSS，則必須在終端機再輸入

$ compass watch

接下來就可以開始編輯SASS檔案了，記得每次要求編譯時，要先指定到該資料然後 watch。如果自行多建立 SASS 文件，則在編譯時，css資料夾會自動產生該文件css檔。

Step3 : config.rb  設定

可以在 config.rb 檔內做 css、sass、images 等資料夾設定


說明1: [ output_style ]  CSS碼有下述四種編譯方式：
expanded = 一般。每行 CSS 皆會斷行
nested = 有縮進。較好閱讀。
compact = 簡潔。匯出來的 CSS 檔案大小比較小。
compressed = 壓縮。壓縮過的CSS。

 以上是比較常用的，更詳細可以看官方教學

Read More

Huzi 清晨7:22  No comment

Sublime Text 3 安裝設定

Sublime Text 3 的好處就不多加介紹，這裡主要簡單說明設定，順便幫自己做一下筆記。

先到官網下載 Sublime Text 3

每個編輯器都有很多好用的 plugin ，當然 Sublime 也不例外，首先先安裝 Package Control，之後許多好用的套件就從此下載。

1. 安裝 Package Control ：

Ctrl + `   組合鍵開啟，直接複製以下安裝程式碼到命令列中，並直接按下 Enter 及安裝完畢：

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)



注意：此段成式碼只適用於 Sublime Text 3 。Sublime Text 2 程式碼看這。

安裝完畢後再按一次 Ctrl + `  關閉控制台視窗，或直接重開 Sublime Text 3 。

2. Sublime Text 套件管理：

之後安裝的套件都可以在 [ Preferences ] ＞ [ Package Control]  Sublime Text 套件管理員做管理，包含安裝、移除、設定等

3. 開始安裝套件：

呼叫 Install Package，可以從  [ Preferences ] ＞ [ Package Control] 選擇，也可以輸入快速鍵：Ctrl+Shift+P
接著在輸入框內，輸入 inst 後會自動跑出下拉式選單，選取 Install Package 按 Enter

等待幾秒後會出現以下視窗，此時就可以開始輸入你要安裝的套件名稱。

4. 各別管理套件

所有安裝的套件都可以從  [ Preferences ] ＞ [ Package Settings ] 各別做設定

5. 其他設定 - 呼叫側欄

  [ View ] ＞ [ Side Bar ]

6. 其他設定 - 調大字體

這樣大致上就完成，為了怕工作久了變成鬥雞眼（誤），我會把字體調大，像老人一樣...

差不多完成，
所謂工欲善其事，必先利其器，
接下來就要分享有哪些好用的 Plugins。

Read More

Huzi 凌晨2:10  No comment