最近有些軟件重裝了一下，很多插件配置都需要再來一次，發(fā)現(xiàn)有些之前的配置問題還是會遇到，就做一些總結(jié)，方便自己也方便大家。

我個人比較喜歡 JetBrains 的 IDE，用起來蠻舒服，很省心的感覺。

本文主要將 WebStorm 下配置 Sass，以及 Sass 的自動編譯。

Sass

什么是 Sass，我引用官網(wǎng)的一句話

Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優(yōu)雅。 它允許你使用變量、嵌套規(guī)則、 mixins、導(dǎo)入等眾多功能， 并且完全兼容 CSS 語法。 Sass 有助于保持大型樣式表結(jié)構(gòu)良好， 同時也讓你能夠快速開始小型項目， 特別是在搭配 Compass 樣式庫一同使用時。

更多 Sass 的使用請閱讀Sass 中文文檔

Sass 現(xiàn)在常見的編譯方法有兩種，一種是直接用命令行編譯；另一種就是利用一些編譯工具；例如：騰訊的 koala。上網(wǎng)查詢后，發(fā)現(xiàn) WebStorm 中集成了 Sass 的編譯。

Ruby

Sass 是用 Ruby 語言寫的，但是兩者的語法沒有關(guān)系，所以學(xué) Sass 不用學(xué) Ruby，只是必須先安裝 Ruby，然后再安裝 Sass。

Linux 和 Mac 已自帶 Ruby，不用再安裝。Windows 用戶可以從這里下載 Ruby 的安裝程序。

安裝過程沒什么麻煩的，安裝指引安裝即可。完成后，在命令行中輸入 ruby -v 查看 ruby 版本號，如果可以正確顯示版本號，說明安裝成功。

? ~ ruby -v ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin18]

Ruby 安裝完畢后，我們要安裝 Sass，在命令行中輸入 gem install Sass，安裝完畢輸入 sass -v，如果顯示正確版本號，說明 Saaa 安裝成功。

? ~ sass -v Ruby Sass 3.7.2

WebStorm

打開 WebStorm 設(shè)置界面，在頂部搜索 File Watchers，在右邊新建 SCSS 項，過程如下。

彈出 SASS 設(shè)置界面：

Program

Program 為你所安裝的 Sass 的路徑，路徑為自己系統(tǒng)對應(yīng)的 Ruby/bin/sass，例如我的 MAC 系統(tǒng)對應(yīng)路徑為 /usr/local/bin/sass。

Arguments

Arguments 為配置參數(shù)，常見的配置參數(shù)如下：

• –style 表示解析后的 css 是什么格式，如：–style compressed，有四種取值分別為：nested，expanded，compact，compressed.
• –sourcemap 表示開啟 sourcemap 調(diào)試。開啟 sourcemap 調(diào)試后，會生成一個后綴名為.css.map 文件。 webstorm 是默認開啟 sourcemap 的，所以可以不填寫
• –debug-info 表示開啟 debug 信息，升級到 3.3.0 之后因為 sourcemap 更高級，這個 debug-info 就不太用了。

四種 --style 對應(yīng)的編譯后的樣式如下：

// SCSS a {color: #ccc;&:hover {color: #fff;} } li {float: left; }// nested 嵌套型 a {color: #ccc; }a:hover {color: #fff; }li {float: left; }// expanded 展開型 a {color: #ccc; } a:hover {color: #fff; }li {float: left; }// compact 緊湊型 a { color: #ccc; } a:hover { color: #fff; }li { float: left; }// compressed 壓縮型 a{color:#ccc}a:hover{color:#fff}li{float:left}

Output Path

Output Path 是輸出文件對應(yīng)的路徑，你想將 SCSS 編譯后的 CSS 文件放在什么地方是由這個決定的。

至此新建 SCSS 樣式文件，編輯完畢，每次更改保存，都會自動的編譯出對應(yīng)的 CSS 樣式文件，WebStorm 配置 Sass 完成。

更多精彩內(nèi)容可以訪問我的博客Aelous-BLog

總結(jié)

以上是生活随笔為你收集整理的WebStorm配置Sass的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。