前言

學過css的人都知道，css他不是一個編程語言。雖然你可以用css去寫網頁樣式，但是你卻沒法使用它進行編程。所以有一句話來描述css我個人覺得再合適不過了，”CSS基本上是設計師的工具，不是程序員的工具。”由于它沒有變量，也沒有條件語句，只是一行行單純的描述，寫起來相當費事。于是，后來就有一些“偷懶者”給css加入一些編程元素，做成了“css預處理器”，使得css具有了編程的能力。現如今css預處理有恨多種，在這里我們主要介紹sass。

sass和scss的區別

說到sass，可能會有小伙伴提到scss。這兩者之間到底存在什么關系呢？或者說它們之間有什么區別。這里我說一下我個人的看法，僅供參考。我個人認為scss是sass的加強版，如果用sass的話需要非常嚴格的縮進，沒有大括號，沒有分號。而scss則跟我們平時使用的css差不多，用起來更加順手一些。當然要是裝比的話還是sass比較好，不過對于我們這些新手前端還是乖乖的用scss比較好，別到時候逼沒裝成，自己先一臉懵逼了。珍愛生命，遠離裝逼！

手動編譯sass或者scss

//單文件轉換命令 sass style.scss style.css//單文件監聽命令 sass --watch style.scss:style.css//文件夾監聽命令 sass --watch sassFileDirectory:cssFileDirectory

手動命令來sass和scss的編譯，在使用過程中有些復雜，雖然有監聽命令，但是這只會在切換窗口的時候才會觸發，失去焦點不再編輯的時候并不會，這就給我們開發帶來的很多的不便。好在webstorm和intellij idea有自動編譯sass和scss功能，極大便捷我們的開發，下面我們就說一下如何去配置。

webstorm和intellij idea下自動編譯sass和scss文件配置

第一步 檢查是否安裝了sass

利用sass -v這條命令查看是否安裝了sass，出現版本號即為安裝成功。如果沒有安裝，可自行搜索度娘查看如何安裝，這里就不在贅述。

第二步 安裝File Watchers

打開webstorm或intellij idea，查看是否有File Watchers這個工具。如果沒有則需要到Plugins中下載。

第三步 新建watcher

點擊“+”按鈕，選擇所要監聽的文件類型，這里我們選擇scss，小伙們需要寫sass文件可以選擇sass。

第四步 watcher配置

選擇自己的sass安裝目錄，如果windows的話默認是C：Ruby23binscss.bat，這里需要注意一點如果你是要自動編譯sass，則需要選中sass.bat,可別選錯了哦。如果是mac下，默認目錄是/usr/local/bin/scss。如果需要自動sass也是一樣。

第五步 檢查是否配置成功

新建一個scss或者sass文件就可以看到底下會多兩個文件，我們寫代碼的時候引入其中的css文件即可

總結

以上是生活随笔為你收集整理的webstorm和intellij idea下如何自动编译sass和scss文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。