在sublime text3 中安裝 sass 高亮外掛、提示外掛

來掘金了發表於2018-01-19

方法一：

首先安裝ruby環境，不然會編譯失敗，

下載ruby，https://rubyinstaller.org/downloads/，安裝：
複製程式碼

在sublime text3 中安裝 sass 高亮外掛、提示外掛

在cmd中輸入gem -v 顯示出版本號就說明是安裝成功。

待ruby安裝成功後，在cmd中輸入gem install sass 來安裝sass。

如果sass 安裝失敗，需要設定淘寶映象：

gem sources --remove https://rubygems.org/

gem sources -a https://ruby.taobao.org/
複製程式碼

在sublime中安裝外掛：

1）在sublime 中安裝外掛：sass和sass Build；

2）建立sass檔案並保持為.scss格式；

3）Ctrl + B,選擇SASS編譯。
複製程式碼

在sublime中進行配置，

1、Tools -> Build System -> New Build System（工具-> 編譯系統 -> 新建編譯系統）；

2、貼上如下程式碼：

{

    "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
    "selector": "source.sass, source.scss",
    "encoding":"cp936",
    "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，盡情編譯吧！

相關文章