第一步:ruby安裝
因?yàn)閟ass是依賴于ruby的啃沪,所以需要先安裝ruby陌粹。官網(wǎng)下載ruby
安裝過(guò)程中溺蕉,請(qǐng)注意奏属,勾選?Add Ruby executables to your PATH?選項(xiàng)跨跨,可以保證在系統(tǒng)中添加好環(huán)境變量,防止之后在編譯軟件中發(fā)生找不到ruby環(huán)境的錯(cuò)誤囱皿。另勇婴,安裝地址無(wú)特殊要求。
第二步:sass安裝
安裝完ruby后嘱腥,可在菜單中找到ruby耕渴,打開(kāi)?Start Command Prompt with Ruby
在命令行中輸入
gem install sass?
enter確認(rèn),等待一會(huì)后提示安裝成功爹橱。
因?yàn)楸娝苤木W(wǎng)絡(luò)問(wèn)題萨螺,如果沒(méi)有安裝成功,可以利用淘寶的RubyGems鏡像安裝sass愧驱。
首先慰技,我們需要把默認(rèn)的https://rubygems.org源移除
gem sources --remove https://rubygems.org/
然后添加淘寶的源https://ruby.taobao.org/
gem sources -a https://ruby.taobao.org/
之后可以查看一下當(dāng)前使用的源
gem sources -l
如果顯示是淘寶的,那么就可以輸入安裝sass命令
gem install sass
更多的gem命令可以點(diǎn)這里喵
第三步:sublime中安裝相關(guān)插件
選擇 Sass 與 Sass Builder安裝组砚。
第四步:測(cè)試
在 Sublime 中新建文件 test.scss
$color: #369;
body {
background: darken($color, 10%);
}
Ctrl+B吻商,進(jìn)行編譯。如果成功糟红,則顯示
write C:\Users\work/test.css
……
如果未編譯成功艾帐,則顯示
[Decode error - output not utf-8]
……
針對(duì)這個(gè)坑,有兩種解決方法盆偿。
1.第一步中就提醒要勾選 Add Ruby executables to your PATH 選項(xiàng)柒爸,如果沒(méi)有勾選,那么就會(huì)造成該問(wèn)題事扭。解決方法是:
右鍵 我的電腦(此電腦)捎稚,選擇 屬性,高級(jí)(高級(jí)系統(tǒng)設(shè)置)求橄,環(huán)境變量今野,編輯PATH,將自己的ruby/bin地址新建進(jìn)去罐农,如:C:\Users\lt\Downloads\Ruby200-x64\bin
確定后条霜,重啟Sublime和相關(guān)文件,即可Ctrl+B編譯成功涵亏。
2.如果上面的方法還是沒(méi)有填上這個(gè)坑宰睡,那就在試試這個(gè)方法吧蒲凶。如果之前,輸入
?sass -v?
沒(méi)有正確輸出sass的版本號(hào)夹厌,那就再運(yùn)行一次
gem install rails
命令豹爹,安裝gem∶疲回到Sublime中臂聋,看看是否可以編譯成功了呢。
最后是學(xué)習(xí)sass的網(wǎng)站:
SASS中文網(wǎng):http://www.sasschina.com/
SASS用法指南(阮一峰):http://www.ruanyifeng.com/blog/2012/06/sass.html
SASS在線轉(zhuǎn)換器:http://www.sassmeister.com/
填坑參考: