安裝sass以及如何在sublime裏使用

想要使用sass的話，就必須依賴於ruby環境。

第一步，下載ruby

點開下載ruby的連接

下載好以後，就須要一步步進行安裝了（建議你們把其安裝在c盤）

安裝過程當中請注意勾選Add Ruby executables to your PATH添加到系統環境變量。
ok，安裝完畢！

打開cmd面板，輸入 ruby -v能夠看到ruby的版本號說明安裝成功。

第二步，安裝 Sass

Ruby自帶一個叫作RubyGems的系統，用來安裝基於Ruby的軟件。咱們可使用這個系統來 輕鬆地安裝Sass和Compass。要安裝最新版本的Sass和Compass，你須要輸入下面的命令：

//安裝以下(如mac安裝遇到權限問題需加 sudo gem install sass)
  gem install sass
  gem install compass

安裝完成以後，應該經過運行下面的命令sass -v來確認應用已經正確地安裝到了電腦中：

第三步，安裝sublime編輯器的sass插件和sass build插件

打開sublime

首先你要看的是在preference選項下有沒有package control這個選項，若是沒有的話，就表示你沒有Package Control 插件（一個方便 Sublime text 管理插件的插件），這時，你就要從菜單 View - Show Console 或者 ctrl + ~ 快捷鍵，調出 console。將如下 Python 代碼粘貼進去並 enter 執行，不出意外即完成安裝

sublime text3

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

sublime text2

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

完成了這步以後,再從新打開咱們的sublime，按住ctrl+shift+p，並輸入install，選擇第一個Install Package，

在命令欄中輸入"Sass"而後回車，而後在彈出的列表中選擇Sass插件，經過鼠標單擊或者回車進行安裝，可經過左下角狀態欄查看安裝結果

在命令欄中輸入"SassBuild"而後回車，而後在彈出的列表中選擇SassBuild插件，經過鼠標單擊或者回車進行安裝，可經過左下角狀態欄查看安裝結果

按ctrl+shift+p，輸入package，選擇list packages，就看到了咱們安裝的插件列表

若是你看到了sass和sass bulid就說明插件安裝成功了。

而後嘗試着寫一個scss文件，寫完以後，按ctrl+b就能夠實現sass文件的編譯了，會生成一個自動編譯生成css文件。

但很不幸個人sublime出現了一個報錯[Decode error - output not utf-8]

第四步，解決sublime的編碼報錯

sublime text有時運行會輸出如下錯誤信息：

[Decode error - output not utf-8]或者[Decode error - output not gbk]

錯誤信息意思就是腳本輸出的信息不是某種指定編碼。

用如下方法解決，有點麻煩，要有耐心，別弄錯了哦！

1.在sublime text的安裝目錄下的Packages目錄下找到Default.sublime-package，將這個複製出來,將後綴更名爲zip.

它就是個zip文件，解壓縮它，而後將其中的exec.py文件放到sublime text的DataPackagesUser目錄下。

2.打開exec.py文件，找到類ExecCommand的append_data函數，在如下位置添加代碼（能夠把這段函數的代碼替換就行了）：

def append_data(self, proc, data):  
 if proc != self.proc:  
     # a second call to exec has been made before the first one  
     # finished, ignore it instead of intermingling the output.  
     if proc:  
         proc.kill()  
     return  

 #add start  
 is_decode_ok = True;  
 try:  
     str = data.decode(self.encoding)  
 except:  
     is_decode_ok = False  
 if is_decode_ok==False:  
     try:  
         str = data.decode("gbk")  
     except:  
         str = "[Decode error - output not " + self.encoding + " and gbk]\n"  
         proc = None  

 # Normalize newlines, Sublime Text always uses a single \n separator  
 # in memory.  
 str = str.replace('\r\n', '\n').replace('\r', '\n')  

 self.output_view.run_command('append', {'characters': str, 'force': True, 'scroll_to_end': True})

其原理就是在解碼輸出文字編碼出錯時再使用gbk試試,至關於utf-8和gbk兩種編碼都試試,這樣能夠解決編碼錯誤的問題。

OK啦，我安裝的時候就出現這些問題了。能夠開始使用sass啦~~哈哈哈哈~

下面提供我參考的文章，若是還有其餘問題能夠仔細閱讀一下。
https://www.sass.hk/install/（sass中文網）
http://shashanzhao.com/archiv...（解決編碼報錯）
http://www.cnblogs.com/qqqian...（sublime安裝sass插件）