導語:
由于準備學習 Sass,并且我習慣使用sublime編輯器,折騰了下sublime下如何配置 sass,記下遇到的坑,有什么問題歡迎交流。
一、安裝Ruby環(huán)境
- Sass依賴于ruby環(huán)境,所以裝sass之前先確認裝了ruby。可以到 Ruby 的官網(wǎng)下載對應需要的 Ruby 版本。
-
安裝注意:
145516gbsqvgff9e8xxevc.jpg - 安裝成功,輸入
ruby -v
,可以看到:
搜狗截圖20170322131210.png
二、安裝Sass
- 通過終端命令安裝 Sass。
- 打開電腦的ruby命令終端,輸入下面的命令:
gem install sass
- 提醒一下,在使用 Mac 的同學,可能需要在上面的命令前加上"sudo",才能正常安裝:
sudo gem install sass
- 上面的方法一般是能安裝成功的,但是墻的厲害,所以我是使用淘寶鏡像安裝的
- 淘寶鏡像安裝法:(ruby終端下輸入命令)
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系統(tǒng)不支持https,請將淘寶源更換成:gem sources -a http://gems.ruby-china.org】
$ gem sources -l
$ gem install sass
-
成功后如圖:
搜狗截圖20170322133832.png
三、Sublime下安裝Sass和Sass Build
打開sublime,鍵入快捷鍵
Ctrl+Shift+P
,在 install package 下找到Sass和Sass Build,安裝。成功后在 package control:list package 下能看見
搜狗截圖20170322132457.png
四、結語
至此,安裝已經(jīng)完成,在sublime編輯器下創(chuàng)建.sass
文件,保存后,快捷鍵Ctrl+B
即可得到.css
和.css.map
文件。
如果編譯出錯,可以嘗試把后綴
.sass
改為.scss