sass基於ruby引擎,所以安裝時ass、compass之前需要安裝ruby。具體的鏈接應該是(http://rubyinstaller.org/downloads)。下載並安裝相應的版本,勾選第二項(要在cmd中使用ruby)。
打開命令行,輸入ruby -v,查看我們安裝的ruby版本信息。
ruby安裝完成之后,打開ruby的command面板,接下來就是安裝sass了。Windows下安裝sass有多種方法,這里說一下其中的兩種:
1、到 Rubygems(http://rubygems.org/) 下載 Sass 的安裝包(http://rubygems.org/gems/sass),然后在cmd輸入:
gem install <把下載的安裝包拖到這里>
回車!
2、打開cmd,輸入 gem install sass --version=3.4.22(可選版本),回車。(卸載方法: gem uninstall sass --version=3.4.22)。
接下來開始在sublime中安裝sass插件
打開sublime,ctrl+shift+p,輸入install,選擇第一個(Package Control)回車
命令框中輸入Sass,選擇,回車!(同樣的步驟,命令框中輸入SassBuild,選擇,回車!)。
Ctrl+shift+p,輸入list packages,回車,可以看到插件列表,如果其中有Sass和SassBuild,說明安裝成功了。、
寫完scss文件后,Ctrl+b就可以編譯了,但默認編譯后的css文件和scss文件放在同一個文件夾,寫項目的時候可能會有很多css文件,有固定的css文件夾,這時候就需要把編譯后的css文件,放到這個指定的文件夾了,手動移動的話,有點麻煩,那就跟着下面的步驟設置一下吧。
1、Tools -> Build System -> New Build System
2、粘貼如下代碼:
{
"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
保存到Sublime Text3 Packages下,新建MySass文件夾,保存文件名MySass.sublime。
3、Tools -> Build System -> MySass ,選擇編譯類型。
這樣設置以后,如項目中有css文件夾,就會編譯到css文件夾中,如果沒有,會自動生成一個css文件夾,用於保存編譯后的css文件。
然后Ctrl+b,盡情編譯吧!