首先安裝Ruby環境
sass是基於ruby的產物,因此在安裝sass前需要先安裝ruby,如果用命令方式編譯Sass也是必須安裝ruby的。命令行編譯sass見!
下載Ruby windows 安裝包: http://rubyinstaller.org/downloads/
根據你的系統下載相應的版本!
下載好后直接運行rubyinstaller-2.3.0-x64.exe 這個文件,Add Ruby executables to your PATH添加環境變量的選項必須選擇上,否則后面還需自己手動添加。
安裝完成后打開cmd命令提示符輸入ruby -v,如果出現版本號信息,說明安裝成功了。
======================================================================================
安裝Sass方式:
- 通過命令安裝 Sass
- 通過 Compass 來安裝 Sass
- 本地安裝 Sass
- 淘寶 RubyGems 鏡像安裝 Sass
這里介紹下通過命令安裝Sass,在開始菜單啟動Start Command Prompt with Ruby,然后輸入:
gem install sass
如果出現被牆的情況,可以使用代理或者考慮上面的其他安裝方式進行。
安裝完Sass之后,就可以通過sass命令來進行編譯了,但這又回到了命令編譯方式。
=================================================================================
sublime text 3安裝sass和Sass 和 SASS Build插件
利用package control工具可以直接安裝這兩款插件。
Ctrl+shift+p ----->install package------->sass、sass build
安裝好這兩款插件后,查看Tools->Build System可以發了有了SASS和SASS - Compressed兩種編譯模式。
Sass編譯出來的樣式風格有4種:
嵌套輸出方式 nested 它是默認值
展開輸出方式 expanded
緊湊輸出方式 compact
壓縮輸出方式 compressed 生產環境當中一般使用這個
sublime-執行編譯
首先得新建一個scss文件,比如test.scss(編碼必須是UTF-8),並寫點Sass代碼,保存之后,按下快捷鍵Ctrl+B
如果表示編譯成功,並自動生成了test.css和test.css.map兩個文件,然后就可以在html種引用這個css文件了。注意在編譯的時候test.scss文件模式必須設置為Sass,在sublime工具的右下角可以看到。(或者 選擇 工具---->編譯系統--->sass)
通過sublime來編譯Sass可以實時進行,所以就沒有了watch等一些監聽源文件的功能。
以上就是全部步驟。