如何在sublime中使用sass


搞了好久,終於把sass搞定了。

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

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

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

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

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

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

Ruby 安裝完成后,在開始菜單中找到新安裝的 Ruby,並啟動 Ruby 的 Command 控制面板,如下圖所示:

當你的電腦中安裝好 Ruby 之后,接下來就可以安裝 Sass 了。同樣的在windows下安裝 Sass 有多種方法。給大家提供一種最實用的方法。

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

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

直接回車即可安裝成功。

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

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

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

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

如果你看到了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 之后即可.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM