sublimeText3 中配置sass環境,並將編譯後文件保存到指定文件夾

sass基於ruby引擎,因此安裝時ass、compass以前須要安裝ruby。具體的連接應該是(http://rubyinstaller.org/downloads)。下載並安裝相應的版本,勾選第二項(要在cmd中使用ruby)。css

打開命令行,輸入ruby -v查看咱們安裝的ruby版本信息。shell

 ruby安裝完成以後,打開ruby的command面板,接下來就是安裝sass了。Windows下安裝sass有多種方法,這裏說一下其中的兩種:windows

一、到 Rubygems(http://rubygems.org/) 下載 Sass 的安裝包(http://rubygems.org/gems/sass),而後在cmd輸入:sass

gem install <把下載的安裝包拖到這裏>

    回車!ruby

二、打開cmd,輸入 gem install sass --version=3.4.22(可選版本),回車。(卸載方法: gem uninstall sass --version=3.4.22)。ui

接下來開始在sublime中安裝sass插件spa

打開sublime,ctrl+shift+p,輸入install,選擇第一個(Package Control)回車插件

命令框中輸入Sass,選擇,回車!(一樣的步驟,命令框中輸入SassBuild,選擇,回車!)。命令行

Ctrl+shift+p,輸入list packages,回車,能夠看到插件列表,若是其中有Sass和SassBuild,說明安裝成功了。、3d

寫完scss文件後,Ctrl+b就能夠編譯了,但默認編譯後的css文件和scss文件放在同一個文件夾,寫項目的時候可能會有不少css文件,有固定的css文件夾,這時候就須要把編譯後的css文件,放到這個指定的文件夾了,手動移動的話,有點麻煩,那就跟着下面的步驟設置一下吧。

一、Tools -> Build System -> New Build System

二、粘貼以下代碼:

   {  
      
        "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。

三、Tools -> Build System -> MySass ,選擇編譯類型。

這樣設置之後,如項目中有css文件夾,就會編譯到css文件夾中,若是沒有,會自動生成一個css文件夾,用於保存編譯後的css文件。

而後Ctrl+b,盡情編譯吧!

相關文章
相關標籤/搜索