sublimesass自動編譯
A. sublime 編譯器如何設置
下面這種方法試過沒有?我剛試了這種是可以的……
在「我的電腦」右鍵屬性
→
高級
→
環境變數
→
在「系統變數」里找到「Path」,點擊「編輯」
→
把「;路徑名」(不包括雙引號)復制到最後
→
最後一路「確定」保存。
B. 使用sublime text3+sass build插件編譯,為什麼會出現編碼錯誤
最近研究sass,用的是vs+vs插件,實在是太大了(雖然電腦跑的動)
之前一直用sublime,所以決定繼續改用輕量級的開發工具。
註:我是sublime Text2,(3應該差不多)
【進入正題】同樣出現樓主的問題,於是開始網路(原諒我沒有翻牆用google)。
網路後結合實際情況先這樣解決:
1.Preferences->Browse Packages...
2.找到SASS Build文件夾
3.打開SASS.sublime-build
{
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
4.在"selector": "source.sass, source.scss",後面加上"encoding":"cp936",
5.重啟sublime
但是出現ctrl+b出現新的問題『sass』不是內部或外部命令,也不是可運行的程序或批處理文件
看到這里我恍然大悟,原來不是編碼問題,而是環境變數出問題了。
後來發現自己安裝ruby沒有勾選添加環境變數
【總結】:
由於我添加環境變數後把修改的"encoding":"cp936",刪除依然可以編譯成功,我覺得sublime中sass編譯(或者ruby等編譯)出現[Decode error - output not utf-8]問題其實是環境變數未添加。解決方法就是手動在高級系統設置中添加。(如果實在懶可以卸掉ruby重新安裝,記得勾選中間的添加環境變數。記得安裝sass)
最後補充一下,可以先試一下我試過的添加encoding方法,因為我也不是100%確定。
C. 如何在sublime3中配置能自動識別文件類型,編譯的.sublime
Sublime Text 配置文件兩 Default User二者都 JSON 格式記錄配置信息其前者記錄著 Sublime Text 默認配置禁止用戶修改;者默認空允許用戶修改User 配置文件內容覆蓋 Default 相應內容所要修改 User 配置文件
D. sublimetext3中的sass文件編譯出的css怎麼能讓它自動換行
第1步:菜單欄-->幻燈片放映-->排練計時(設置排練時間)第2步:幻燈片放映-->設置放映方式-->切片方式-->如果存在排練時間則使用它(該步驟一般為默認,不用設置)第3步:幻燈片放映-->觀看放映.
E. 如何用sublimeText3編寫less並用Nodejs自動編譯成css
1、安裝Sublime 插件
(1)安裝LESS插件:
因為Sublime不支持Less語法高亮,
所以,先安裝這個插件,
方法1: (首先確保sublime上已安裝了Package Control) 按住ctrl+shift+p>install Package>輸入less按Enter
方法2:直接下載後 解壓文件 放到插件文件夾下(首選項-瀏覽插件 打開文件夾)
下載地址:https://github.com/danro/LESS-sublime
(2)安裝LESS2CSS插件:
less2css的讀音 其實就是less to css
這個插件的作用是
當保存less文件的時候自動生成同名的css文件;
當保存less文件的時候提示編譯錯誤信息;
批量編譯項目目錄下的所有less文件為css文件。
安裝:
方法1:ctrl+shift+p>install Package>輸入less2css按Enter
方法2:直接下載:https://github.com/timdouglas/sublime-less2css
解壓文件 放到插件文件夾下
但是我們還要讓sublime支持less並自動編譯,所以還需以下步驟:
2、安裝Node.js
首先先配置一下環境,
less需要nodejs支持,
所以我們先要安裝一下nodejs
到nodejs官網下載就可以了:https://nodejs.org/en/
3、安裝less
運行-cmd:
輸入命令行:
npm install less -g
-g 代表著全局安裝less
之後在 Sublime 裡面建less文件時,會有一個錯誤
LESS: Unable to interpret argument clean-css
這是因為還需要一個插件
less-plugin-clean-css插件的安裝
命令行為:
npm install less-plugin-clean-css -g
接著重啟一下sublime,就搞定啦!
F. 如何在sublime中使用sass
下載相應的版本。建議大家不要使用谷歌瀏覽器,因為他真得載入不出來。
下載好之後,就需要一步步進行安裝了(建議大家把其安裝在c盤),這里需要注意的是:
這個勾別忘了選,因為不選中,就會出現編譯時找不到Ruby環境的情況。
這時,我們在控制台輸入ruby -v就可以得到我們的安裝好的ruby的版本號等信息
Ruby 安裝完成後,在開始菜單中找到新安裝的 Ruby,並啟動 Ruby 的 Command 控制面板,如下圖所示:
當你的電腦中安裝好 Ruby 之後,接下來就可以安裝 Sass 了。同樣的在windows下安裝 Sass 有多種方法。給大家提供一種最實用的方法。
到 Rubygems() 網站上將 Sass 的安裝包(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
1
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( '' + pf.replace(' ','%20')).read())
sublime text2
1
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( '' +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 之後即可.
G. myeclipse中如何配置SASS編譯工具
我最近也在學sass,之前用的是sublime test2,這個編譯器有個好處就是轉譯成css的時候方便,但是終究還是和項目分離,也很麻煩。後來發現只要通過命令行一直監視整個目錄或者文件就方便多了,只要保存,sass就會自動編譯,下面是例子:
監視文件:
sass --watch test.scss:test.css
監視目錄
sass --watch sass(sass目錄):css(css目錄)
滿意的話希望採納啦。。。。