# 關於HyUI修改成scss3.0可以編譯檔案的方法

如果你的scss檔案出現無法編譯的錯誤訊息，是因為引入@import及部分函式寫法在新版Sass中已經被廢棄，造成無法編譯。請先讀完下面這篇文章我們再開始
https://hackmd.io/@GiuHpxY1Q8K2rsemu8zlWA/HyNgaKtpyg

如果你很害怕開始，可以參考我改好的網站
https://github.com/HywebU00/2025_keelung_tax

**更改成新版有幾個步驟**：
1. **先複製一份檔案，只修改複製出來的檔案**，因為可能最後徒勞無功，時間緊迫的話你還是必須先修改CSS（到時候修改回原資料夾名稱一樣可以push回原本的github）
2. 打開你的最主要的SCSS，也就是@import全部SCSS的那隻，**把@import全部改成@use**
3. 打開sass/sass/common/_mixin.scss，**把@import全部改成@forward**
4. 搭配編譯器的錯誤訊息修改每一隻scss，下面會詳細講
5. 先清空編譯器的錯誤訊息，然後存檔，再參考編譯器的錯誤訊息，修正錯誤的路徑和函式，然後再清空編譯器的錯誤訊息，再存檔，等待下一個錯誤通知，一直重複**修正－清空－存檔－修正－清空－存檔**一直到都沒有錯誤訊息
6. 刪除最主要的SCSS裡面@use "_variable";及@use "sass/common/_mixin";再重新編譯一次即可完成（這個可以在任何一個步驟做）

**接下來是詳細步驟**
### 2️⃣ 最主要的SCSS@import全部改成@use

### 3️⃣ 把sass/sass/common/_mixin.scss裡的@import全部改成@forward

### 4️⃣ 搭配編譯器的錯誤訊息修改每一隻scss，有七個地方要注意
#### 1. 每一隻scss引入三個函式

@use "sass:color"; //色彩
@use "sass:math"; //算數
@use "sass:map";

#### 2. 除了三個函式之外，一定要引入變數_variable.scss和_mixin.scss，注意！！路徑是相對於檔案的位置，路徑一定要對

@use "../variable" as *; //記得根據檔案位置改路徑
@use "../sass/common/mixin" as *; //記得根據檔案位置改路徑

#### 3. 如果該scss有用到寫在_variable.scss和common/_mixin.scss以外的變數或是mixin的話，也要引入，注意！！路徑是相對於檔案的位置，路徑一定要對

@use "../sass/element/font" as *; //記得根據檔案位置改路徑
@use "../sass/element/btn" as *; //記得根據檔案位置改路徑

其中element/_font.scss最常重複被利用的mixin是aSetting_nocolor;element/_btn.scss最常用到的是按鈕設定和顏色，當然如果你用到更多可能會引入更多，那就要根據編譯器的錯誤訊息做修正

#### 4. 修改舊的色彩lighten和darken的寫法，例如

background: lighten($primaryColor, 10);

要寫成

background: color.adjust($primaryColor, $lightness: 10%);

而

background: darken($primaryColor, 10);

要寫成

background: color.adjust($primaryColor, $lightness: -10%);

如果不會，請貼給chatgpt，但一定要用**color.adjust**這個方法，我試過**color.lighten**無效，所以如果chatgpt給你這個方法，不要相信它！！

#### 5. 修改計算的方法，例如沒有加calc請加上，或是加math.div也可以
例如

padding-top: ($height / $width) * 100%;

改成

padding-top: math.div($height, $width) * 100%;

如果不會，請貼給chatgpt，它會吐給你，要改最多的就是_bootstrap-grid.scss這隻

#### 6. 如果你出現這段文字，別擔心
新的scss他要求你要符合巢狀的順序，要先寫一般的CSS再寫@include和@extend，但不會每個都抓，我猜是mixin寫法的關係，所以如果抓到，找到那一行，搬移位置就可以（但要注意如果你是寫一般CSS來覆蓋mixin的話，就可能會出現問題，這時候可能就要下important），但有個例外就是sass/sass/common/mixins/_clearfix.scss這隻，因為怎樣都不過，所以只好把clear: both;和zoom: 1;註解掉

#### 7. 如果你在不同資料夾用了同個檔名，可能會報錯，這時候只要在最主要的scss分別給與不同命名空間就可以

@use "sass/modual/_form" as *; //表單元件
@use "page/_form" as pageForm; //表單頁面

### 5️⃣ 反覆修正－清空－存檔
因為編譯出錯的關係，你的編譯器的錯誤訊息不會全部都呈現出來，為了方便一筆一筆修正，每次存檔前，先清空編譯器的錯誤訊息，存檔後就會跳出新的錯誤，比較方便對照和查看

### 6️⃣ 刪除最主要的SCSS裡面@use "_variable";及@use "sass/common/_mixin";
因為需要用到的SCSS裡面都個別載入過了，所以可以刪掉，再重新編譯即完成，總共耗時要看案件的大小以及引用mixin的數量，要一個小時到半天不等，所以無障礙限期修正時切記要預留時間