Stylus 轉 SASS 是指將使用 Stylus 編寫的樣式代碼轉換成 SASS（Syntactically Awesome Style Sheets）格式。SASS 是 CSS 預處理器之一，與 SCSS 一樣，它擴展了 CSS，並增加了變數、巢狀、mixin 等功能。SASS 的語法與 SCSS 的不同，它更接近於縮排格式，不使用大括號和分號來標識代碼塊，這使得它的語法更加簡潔。下面我們來看看 Stylus 和 SASS 的區別，以及為什麼會進行 Stylus 轉 SASS。
Stylus 和 SASS 的區別
語法結構：
Stylus：語法非常靈活，可以省略大括號、分號，甚至冒號，並支持縮排式代碼。
SASS：語法更加簡潔，使用縮排表示層級結構，不需要大括號和分號。SASS 強調的是更清晰的結構和簡單的格式，但它的語法也有一些限制，需要遵循嚴格的縮排規則。
變數：
Stylus 使用 var 或 $ 來定義變數。
SASS 使用 $ 來定義變數，並且在 SASS 中變數必須以 $ 開頭。
巢狀結構：
Stylus 允許不使用大括號來進行巢狀結構的定義，並且可以簡化語法。
SASS 則通過縮排來表示巢狀結構，不需要大括號來包裹代碼塊。
為什麼 Stylus 轉 SASS？
統一的語法風格： 如果團隊的開發者偏向於使用 SASS，而不是 Stylus，將 Stylus 轉換為 SASS 可以統一代碼風格，避免不同語法帶來的學習成本和代碼維護困難。
SASS 的普遍使用： 相較於 Stylus，SASS 擁有更廣泛的使用群體和社群支持。許多框架和前端工具（如 Bootstrap、Foundation 等）都使用 SASS，將 Stylus 代碼轉換為 SASS 可能更容易與這些工具集成。
SASS 的語法清晰度： SASS 強調簡潔和結構化的代碼，這讓代碼變得更加直觀，對於大型項目和團隊協作來說，這一點特別重要。
兼容性： 一些工具或項目可能僅支持 SASS 或 SCSS，因此將 Stylus 轉換為 SASS 可能是為了達到更好的兼容性，特別是在現有的工具和框架中。
Stylus 轉 SASS 的常見轉換方法
變數轉換：
Stylus 使用 $ 或 var 來定義變數，而 SASS 只使用 $。
Stylus:
stylus
$color = red
div
color $color
SASS:
sass
$color: red
div
color: $color
巢狀結構：
Stylus 可以省略大括號，直接使用縮排來定義巢狀結構。
SASS 也使用縮排來定義巢狀結構，但必須注意縮排層級的正確性，並且不使用大括號。
Stylus:
stylus
nav
ul
list-style none
li
display inline-block
SASS:
sass
nav
ul
list-style: none
li
display: inline-block
mixin 定義：
Stylus 使用 @mixin 來定義 mixin，SASS 也支持 mixin，但語法稍微不同。
Stylus:
stylus
border-radius(radius)
-webkit-border-radius radius
border-radius radius
SASS:
sass
=border-radius($radius)
-webkit-border-radius: $radius
border-radius: $radius
選擇器合併：
在 Stylus 中，可以直接將多個選擇器合併在一起，而 SASS 需要將它們放在同一個代碼塊內。
Stylus:
stylus
.btn, .link
padding 10px
border-radius 5px
SASS:
sass
.btn, .link
padding: 10px
border-radius: 5px
條件語句與循環：
Stylus 和 SASS 都支持條件語句和循環，但語法不同。SASS 更接近於傳統的程式語言，支持 @if、@else 等條件語句，並且循環語法也是基於這些結構。
Stylus:
stylus
if light
color white
else
color black
SASS:
sass
@if $light
color: white
@else
color: black