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


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,盡情編譯吧!


免責聲明!

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



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