天天看點

如何在sublime中使用sass檔案編譯

最開始,我是想使用koala來實作對sass的實時編譯的,但是每當我儲存的時候,總是彈出erro錯誤,即無法編譯生成css檔案,百度了半天,問了好久,這個問題還是沒能解決了,還希望能有個哥哥姐姐不吝指導我一下。。

下面我給大家介紹一下,如何使用sublime插件實作對scss檔案的編譯的吧。

首先,你想要使用sass的話,就必須依賴于ruby環境。是以,你要下一個ruby。具體的連結應該是(http://rubyinstaller.org/downloads)。下載下傳相應的版本。建議大家不要使用谷歌浏覽器,因為他真得加載不出來。

如何在sublime中使用sass檔案編譯

下載下傳好之後,就需要一步步進行安裝了(建議大家把其安裝在c盤),這裡需要注意的是:

如何在sublime中使用sass檔案編譯

這個勾别忘了選,因為不選中,就會出現編譯時找不到Ruby環境的情況。

這時,我們在控制台輸入ruby -v就可以得到我們的安裝好的ruby的版本号等資訊

如何在sublime中使用sass檔案編譯

Ruby 安裝完成後,在開始菜單中找到新安裝的 Ruby,并啟動 Ruby 的 Command 控制台,如下圖所示:

如何在sublime中使用sass檔案編譯

當你的電腦中安裝好 Ruby 之後,接下來就可以安裝 Sass 了。【這一步很重要,如果不在cmd中安裝sass的話,在sublime中不能編譯成功】

同樣的在windows下安裝 Sass 有多種方法。給大家提供一種最實用的方法。

到 Rubygems(http://rubygems.org/) 網站上将 Sass 的安裝包(http://rubygems.org/gems/sass)下載下傳下來,然後在指令終端輸入:

gem install <把下載下傳的安裝包拖到這裡>
           

或者

gem install sass
           

直接回車即可安裝成功。

接下來,就是在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

如何在sublime中使用sass檔案編譯

選擇第一個Install Pacage,

如何在sublime中使用sass檔案編譯

在指令欄中輸入"Sass"然後回車,然後在彈出的清單中選擇Sass插件,通過滑鼠單擊或者回車進行安裝,可通過左下角狀态欄檢視安裝結果

在指令欄中輸入"SassBuild"然後回車,然後在彈出的清單中選擇SassBuild插件,通過滑鼠單擊或者回車進行安裝,可通過左下角狀态欄檢視安裝結果

按ctrl+shift+p,輸入package,選擇list packages,就看到了我們安裝的插件清單

如何在sublime中使用sass檔案編譯

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

這是你把scss檔案寫完之後,按ctrl+b就可以實作sass檔案的編譯了,他會生成一個自動編譯生成css檔案。這裡,再跟大家介紹一下windows7下解決中文亂碼的問題吧。需要做的就是:

找到ruby的安裝目錄,裡面也有sass子產品,如這個路徑: 

C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass 

在這個檔案裡面engine.rb,添加一行代碼Encoding.default_external = Encoding.find(‘utf-8’) 放在所有的require XXXX 之後即可.

寫完scss檔案後,Ctrl+b就可以編譯了,但預設編譯後的css檔案和scss檔案放在同一個檔案夾

寫項目的時候可能會有很多css檔案,有固定的css檔案夾,這時候就需要把編譯後的css檔案,放到這個指定的檔案夾了,手動移動的話,有點麻煩,那就跟着下面的步驟設定一下吧。

1、Tools -> Build System -> New Build System

2、粘貼如下代碼:

   {  

        "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"],  

        "selector": "source.sass, source.scss",  

        "line_regex": "Line ([0-9]+):",  

        "osx":  

        {  

            "path": "/usr/local/bin:$PATH"  

        },  

        "windows":  

        {  

            "shell": "true"  

        } 

    } 

儲存到SublimeText\Data\Packages\User下,建立MySass檔案夾,儲存檔案名MySass.sublime。

3、Tools -> Build System -> MySass ,選擇編譯類型。

這樣設定以後,如項目中有css檔案夾,就會編譯到css檔案夾中,如果沒有,會自動生成一個css檔案夾,用于儲存編譯後的css檔案。

然後Ctrl+b,盡情編譯吧!

解決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插件)