webstorm和intellij idea下如何自動編譯sass和scss文件

前言

學過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文件便可