前言

學(xué)過(guò)css的人都知道，css他不是一個(gè)編程語(yǔ)言。雖然你可以用css去寫(xiě)網(wǎng)頁(yè)樣式，但是你卻沒(méi)法使用它進(jìn)行編程。所以有一句話來(lái)描述css我個(gè)人覺(jué)得再合適不過(guò)了，”CSS基本上是設(shè)計(jì)師的工具，不是程序員的工具。”由于它沒(méi)有變量，也沒(méi)有條件語(yǔ)句，只是一行行單純的描述，寫(xiě)起來(lái)相當(dāng)費(fèi)事。于是，后來(lái)就有一些“偷懶者”給css加入一些編程元素，做成了“css預(yù)處理器”，使得css具有了編程的能力。現(xiàn)如今css預(yù)處理有恨多種，在這里我們主要介紹sass。

sass和scss的區(qū)別

說(shuō)到sass，可能會(huì)有小伙伴提到scss。這兩者之間到底存在什么關(guān)系呢？或者說(shuō)它們之間有什么區(qū)別。這里我說(shuō)一下我個(gè)人的看法，僅供參考。我個(gè)人認(rèn)為scss是sass的加強(qiáng)版，如果用sass的話需要非常嚴(yán)格的縮進(jìn)，沒(méi)有大括號(hào)，沒(méi)有分號(hào)。而scss則跟我們平時(shí)使用的css差不多，用起來(lái)更加順手一些。當(dāng)然要是裝比的話還是sass比較好，不過(guò)對(duì)于我們這些新手前端還是乖乖的用scss比較好，別到時(shí)候逼沒(méi)裝成，自己先一臉懵逼了。珍愛(ài)生命，遠(yuǎn)離裝逼！

手動(dòng)編譯sass或者scss

//單文件轉(zhuǎn)換命令 sass style.scss style.css//單文件監(jiān)聽(tīng)命令 sass --watch style.scss:style.css//文件夾監(jiān)聽(tīng)命令 sass --watch sassFileDirectory:cssFileDirectory

手動(dòng)命令來(lái)sass和scss的編譯，在使用過(guò)程中有些復(fù)雜，雖然有監(jiān)聽(tīng)命令，但是這只會(huì)在切換窗口的時(shí)候才會(huì)觸發(fā)，失去焦點(diǎn)不再編輯的時(shí)候并不會(huì)，這就給我們開(kāi)發(fā)帶來(lái)的很多的不便。好在webstorm和intellij idea有自動(dòng)編譯sass和scss功能，極大便捷我們的開(kāi)發(fā)，下面我們就說(shuō)一下如何去配置。

webstorm和intellij idea下自動(dòng)編譯sass和scss文件配置

第一步 檢查是否安裝了sass

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

第二步 安裝File Watchers

打開(kāi)webstorm或intellij idea，查看是否有File Watchers這個(gè)工具。如果沒(méi)有則需要到Plugins中下載。

第三步 新建watcher

點(diǎn)擊“+”按鈕，選擇所要監(jiān)聽(tīng)的文件類型，這里我們選擇scss，小伙們需要寫(xiě)sass文件可以選擇sass。

第四步 watcher配置

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

第五步 檢查是否配置成功

新建一個(gè)scss或者sass文件就可以看到底下會(huì)多兩個(gè)文件，我們寫(xiě)代碼的時(shí)候引入其中的css文件即可

總結(jié)

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

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