1.sass
基于Ruby
語言開發而成,因此安裝sass
前需要安裝Ruby。(注:mac下自帶Ruby無需在安裝Ruby!)
window下安裝SASS首先需要安裝Ruby
,先從官網下載Ruby并安裝。安裝過程中請注意勾選Add Ruby executables to your PATH
添加到系統環境變量。
安裝完成后,運行CMD
輸入ruby -v
,測試是否安裝成功,成功則顯示版本,如下圖:
2.更換gem
源為 https://rubygems.org/
//1.刪除原gem源 gem sources --remove https://rubygems.org/
//2.添加國內淘寶源 gem sources -a https://ruby.taobao.org/
//3.打印是否替換成功 gem sources -l
//4.更換成功后打印如下 *** CURRENT SOURCES *** https://ruby.taobao.org/
3.全局安裝 sass
和 compass
,執行 gem install sass
和 gem install compass
,如下:
4.確認 sass
和 compass
安裝成功:命令行輸入:sass --version
compass -v
驗證
5.此處以 intellij idea 為例,使用其自動編譯工具。
1)打開 intellij idea ,File => settings => Plugins , 查看是否有 File Watchers 插件,沒有的話,點擊下方 Install JetBrains plugins 去安裝。
2)安裝成功后,列表顯示出此插件。
3)settings => Tools => File Watchers ,點擊右側加號,添加 SCSS ,點擊 OK。
4)在彈出的 New Watcher => Watcher Setting => Program 處指向 Ruby 的安裝地址,點擊OK,配置完成。
6.此時,再新建 scss 文件,會同時新建一個同名的 css 文件 和 map,直接引用 css文件即可。
Sass
安裝參考:https://www.sass.hk/install/