sublime添加sass編譯


首先安裝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等一些監聽源文件的功能。

以上就是全部步驟。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM