之前抽空了解了一下sass這門css擴充套件語言，感覺很nice，不過由於我主要是做小程式的，所以我也花了些時間研究如何在微信小程式中使用sass來編寫微信小程式的wxss。下面就介紹一下如何在微信小程式中使用sass來編寫wxss程式碼。

第一種，使用編輯器進行編譯，例如webstrom

目前市面上絕大多數的編輯器都提供了對sass編譯的支援，你只需要做一些簡單的配置即可實時監聽sass檔案的改動，從而實時進譯成css檔案，在這裡我以webstrom為例，介紹一下如何用編輯器編譯sass進行開發。ps：每種編輯器如何配置可能都不一樣，其他的編輯器可能需要各位自行搜尋相關教程。

webstorm很強大，如果你一直是使用webstorm來進行程式碼編寫，那麼使用它將sass檔案編譯成一個wxss檔案自然不在話下了，不過前期還是需要一些準備工作的：

（1）新增支援微信的wxss檔案

微信小程式的wxss檔案其實和css檔案是一樣的，語法上其實也沒啥區別，那麼可以將wxss檔案設定成如同css檔案一樣的語法格式和程式碼高亮即可。

找到：FIle => settings => Editor => File and Code Templates  

找到files，簡單點，直接點選CSS File，然後複製一個，再改個名稱和字尾名即可：

改完字尾名後，你就得到了一個擁有和css一樣的語法高亮和提示的wxss檔案的支援，然後如何安裝sass就不說了，而且，使用node命令列進行直接編譯sass也不說了，我們這裡直接說一下每次修改完sass檔案後並儲存時，如何將其直接編譯成wxss吧。

（2）編譯sass檔案

找到：FIle => settings => Tools => File Watchers

 雙擊開啟進入編輯頁面：

Arguments輸入的命令是： --update --no-source-map  $FileName$:$FileNameWithoutExtension$.wxss

注意，我這裡使用了--no-source-map，不會產生map檔案，如果想要的話，你可以去掉這個命令。這裡的$FileName$和$FileNameWithoutExtension$是webstrome自帶的變數，前者是監聽檔案的檔名（帶字尾），後者是不帶檔案字尾的檔名。這樣其實你可以使用這些webstrom定義的一些變數來很自由的進行sass命令的執行。

然後點ok即可。這樣，每次他自動儲存或者你手動儲存時，都會重新將這個你儲存的sass檔案給編譯成wxss檔案。

ps：其他的例如vscode等一些編輯器也可以這樣做，不過具體的方法我就不知道了。各位可執行搜尋資料。

第二種，使用微信開發者工具

有時候啊，你可能用的不是這種重量級的編輯器，用的是比較輕量的比如sublime這種（它應該也可以進行自動編譯的配置，不過我不會），或者你是直接使用微信小程式開發工具進行小程式的開發，那麼如果想要使用sass來編寫樣式，那如何讓sass檔案自動編譯呢？

ps：這一種完全是自己想要研究所以才想到的辦法，但是真正開發的時候這個就很雞肋，為什麼？因為小程式開發者工具自我釋出這篇文章之時，還無法支援開啟sass檔案，既然無法開啟，那麼如果你還想要用sass編寫wxss，肯定是要用其他編輯器編寫的，那何不直接用你的編輯器進行編譯，豈不更好？當然，如果你用的編輯器真的無法編譯sass（比如記事本），那麼你可以用這種。

你可以使用微信小程式開發工具的自定義處理命令來在小程式每次編譯之前，編譯sass檔案為wxss，如圖：

自定義處理命令的使用勞煩看微信官方文件：https://developers.weixin.qq.com/miniprogram/dev/devtools/debug.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%84%E5%A4%84%E7%90%86

而我們在這裡要做的其實就是讓微信開發工具在編譯器編譯小程式之前進行一次sass檔案轉wxss檔案的處理。而命令使用shell進行工作，在windows下的bat命令該如何編寫呢？（mac我並沒有，所有沒有研究）

絞盡腦汁，總結了一下幾種可行的幾種命令方法：

1.使用sass官方命令編譯整個資料夾的命令，但是這個命令只能編譯出css檔案，而無法指定編譯後的檔案的型別，所以，還需要增加一個修改檔案字尾名的命令，把編譯出來的.css字尾的檔案更改為.wxss檔案字尾。

2.遍歷你專案的所有資料夾，找到字尾為.scss的檔案，單獨編譯為wxss（可以指定檔案字尾），但是要還需要判斷以_開頭的sass檔案，因為按照約定，_開頭的scss檔案應該忽略它。（這裡很難受，命令寫的有問題，放棄了）

3.更改sass編譯原始碼，搜尋.css字尾，改為wxss字尾  （一個函式，有很多null的引數的那個），讓他預設編譯出來的就是wxss字尾的檔案，那麼就可以簡單的使用官方sass命令編譯整個檔案夾了（不可取，因為你改原始碼，你只知其一，不知其二，所以，在不瞭解原始碼的情況下很可能有其他安全隱患，萬一出了錯，沒人能幫你，雖然我測試的時候沒什麼問題）。

不過該說的辦法還是要說的，首先，你可以新建一個bat檔案，然後把這個bat檔案放入和app.js同級的那個目錄，再在上圖的編譯前預處理那裡輸入那個bat檔案的名字。ps：你儲存檔案之後，需要手動點選微信開發者工具的編譯命令才會執行你設定的自定義處理命令，這是微信的硬性要求，沒辦法。

第一種bat命令：

@echo off
chcp 65001
sass --update --no-source-map ./:./ && for /f "delims=" %%a in ('dir /a-d /s /b') do (if "%%~xa" == ".css" del /a /f /s /q "%%~na.wxss" && ren "%%~fsa" "%%~na.wxss")
echo on

第二種bat命令（執行結果是非預期的，所有隻是貼出來，請不要使用，或者，各位可以自行研究，看是不是我寫的命令有誤）

@echo on
chcp 65001
SETLOCAL ENABLEDELAYEDEXPANSION
for /f "delims=" %%a in ('dir /a-d /s /b') do (
set var=%%~na
if "%%~xa" == ".scss" if not !var:~0,1!==_ sass   --update --no-source-map %%~dpa%%~na.scss %%~dpa%%~na.wxss)
)
echo on

第三種方法，找到你全域性安裝的sass，找到一個名為：sass.dart.js。如果你的node是預設安裝，那麼你下載的sass包一般會在這：C:\Users\Administrator\AppData\Roaming\npm\node_modules\sass。你在這個路徑下就可以找到這個sass.dart.js檔案，然後你需要搜尋這個檔案，搜尋.css，他是一個有很多null引數的一個函式的那一個地方。修改.css為.wxss即可，其他不需要動。（ps：每個人下載的sass，查詢到的地方可能不一樣，所以......，我找到的長這樣）

但是，我說了，這種方法最好不用，因為萬一出現非預期的編譯情況，我救不了你。

然後bat中只需要以下簡單的程式碼即可：

@echo off
chcp 65001
sass --update --no-source-map ./:./
echo on

選擇以上三種方法中的其中一種，把其中的bat程式碼複製下來，貼上到你新建的與app.js同級的那個bat檔案中，然後你在頁面中新建一個sass檔案，就可以測試了（記住，要編譯，需要手動自己點選編譯按鈕）

其實，微信小程式開發者工具的自定義預處理命令很有用，比如你可以使用他自己自定義babel命令進行es6轉es5的工作，如果你覺得微信小程式自己的babel命令不夠用的話。

其實你也可以直接使用sass的watch命令直接進行sass檔案的更改監聽來編譯，各位可以自行實驗一下，而且，你還可以使用Koala這種官方推薦的編譯工具進行編譯，方法有很多的。

三.一些使用sass時的問題

我在微信小程式自己嘗試使用sass時，還是遇到了一些麻煩，比如：

1.使用sass時，我在使用iconfont字型圖示的Unicode方式的字型圖示引用時，sass在編譯時他會把 content中的 \ 進行轉義，導致字型圖示無法正常使用。比如：

.icon-fanhui:before { content: "\e671"; }這一句，如果放在sass檔案中時，會把他轉為：.icon-fanhui:before {content: "";}，"\e671"被轉義為一個口，或者其他字元。很難受。如果還是要使用字型圖示的話，我建議把單獨的字型圖示樣式拿出來直接放在.wxss檔案中，然後在app.scss中使用@import語法直接匯入那個字型圖示的wxss檔案即可，反正字型圖示一般不需要sass編譯。或者使用字型圖示的其他的方式。不要使用Unicode的方式。

2.由於一般每個微信小程式的page中wxss都是分開在每個頁面中的，如果這時候引用sass公共定義的mixin，函式，變數這些，就都每個頁面的sass檔案要引用一次，而且最低每個頁面的sass都要最少匯入一個檔案，感覺有點麻煩，不過還可以接受吧。

3.而且，sass的@import和微信wxss的@import是衝突的語法，也就是，你想在scss檔案中，使用@import匯入一個普通的wxss檔案，這時候，sass會把這個@import匯入的wxss作為需要編譯的檔案進行匯入編譯，導致報錯。因為sass的@import語法只有匯入.css為字尾的檔案才會忽略他，把他作為一個css的@import語法，那麼這個問題該如何解決呢？

問題3解決：

還是修改sass.dart.js檔案，但是這次只是給sass編譯增加一個判斷條件：讓sass的@import語法在遇到.css或者.wxss檔案結尾時，都作為普通的[email protected]語法，不對其進行編譯。那如何修改？如下：

開啟sass.dart.js檔案，搜尋 .css 關鍵字，找到類似於一個判斷的語法：

之前的程式碼是這樣的：

if(C.b.cz(a,".css"))return!0

修改後是這樣的：

if(C.b.cz(a,".wxss") || C.b.cz(a,".css"))return!0

也就是多了一個判斷是不是.wxss為字尾的檔案，並且，測試後發現沒有什麼問題，算是可以解決問題3。並且，此處原始碼的改動不像改變編譯時的那樣改動這麼危險，這裡僅僅是增加了一個@import語法的判斷，所以，此處的sass原始碼改動比改動編譯時的檔案字尾安全許多，可以使用。

總結

小程式中使用sass時，也許你會遇到其他問題，不過想要真正在一種別人不支援sass的框架中使用sass，還是需要克服這些困難的，所以，記得使用之前認真考慮一下利弊。其實，這麼看的話，其他的css預處理語音，其實也可以在微信小程式中使用，比如less等等，也許你會遇到其他問題，不過，在你想要超脫於標準之外的同時，這些問題同樣都是需要你去面對的。