CSS 轉 Stylus 是將標準的 CSS 代碼轉換為 Stylus 的過程。Stylus 是一種 CSS 預處理器，類似於 SASS 和 LESS，它具有許多增強功能，像是變數、運算、嵌套、混入、條件語句等。Stylus 提供了一些比 SASS 和 LESS 更靈活的語法選項，它允許你選擇是否使用分號、花括號等語法，使得代碼更具可定制性。
Stylus 的特性：
靈活的語法：Stylus 允許你選擇是否使用分號（;）、花括號（{}）和冒號（:），這使得語法變得非常靈活。
變數：可以定義變數來存儲顏色、字體等屬性，避免重複代碼。
嵌套：支持樣式的嵌套，可以模擬 HTML 標籤結構。
運算：支持數學運算，可以對顏色、尺寸、邊距等進行計算。
混入（Mixin）：可以將常用的樣式封裝成混入，重複使用。
條件語句和循環：支持條件語句（if-else）和循環，讓樣式更加動態。
CSS 示例：
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #555;
line-height: 1.6;
}
轉換為 Stylus：
Stylus 允許你省略花括號 {} 和分號 ;，並且支持更多的語法選擇。轉換後的 Stylus 代碼可能看起來會更簡潔。
Stylus 版本 1（無分號和花括號）：
stylus
body
font-family: Arial, sans-serif
background-color: #f0f0f0
h1
color: #333
font-size: 2em
p
color: #555
line-height: 1.6
Stylus 版本 2（有分號和花括號）：
如果你更喜歡 CSS 的語法結構，也可以選擇在 Stylus 中使用花括號和分號：
stylus
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #555;
line-height: 1.6;
}
Stylus 主要特性：
變數： 在 Stylus 中，變數的定義非常簡單，並且它們可以在樣式中重用。
stylus
font-family = Arial, sans-serif
background-color = #f0f0f0
body
font-family font-family
background-color background-color
嵌套： Stylus 支持嵌套，使得樣式結構更加清晰。
stylus
.container
width: 100%
.header
background: #333
color: white
.content
padding: 20px
運算： Stylus 允許進行運算，可以對尺寸、顏色等進行簡單計算。
stylus
$base-size = 10px
.box
width: $base-size * 10
混入（Mixin）： 你可以定義混入，並在需要的地方使用它們來重複使用樣式代碼。
stylus
border-radius(radius)
-webkit-border-radius: radius
-moz-border-radius: radius
border-radius: radius
.box
border-radius(5px)
條件語句和循環： Stylus 支持條件語句和循環，這對於生成動態樣式表非常有用。
stylus
$themes = ['dark', 'light']
each theme in $themes
.theme-#{theme}
background-color: if(theme == 'dark', '#333', '#fff')
color: if(theme == 'dark', '#fff', '#000')
如何將 CSS 轉換為 Stylus？
1. 直接轉換：
將現有的 CSS 代碼轉換為 Stylus 很簡單。基本上，你只需要將 CSS 代碼放入 .styl 文件中，然後去掉花括號和分號，將樣式結構進行縮排即可。
例如，將 CSS 代碼：
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #555;
line-height: 1.6;
}
轉換為 Stylus：
stylus
body
font-family: Arial, sans-serif
background-color: #f0f0f0
h1
color: #333
font-size: 2em
p
color: #555
line-height: 1.6
2. 使用 Stylus 特性：
為了使樣式更具可維護性，你可以使用 Stylus 的一些強大特性，如變數、嵌套、混入等。例如，使用變數來定義顏色和字體：
stylus
font-family = Arial, sans-serif
background-color = #f0f0f0
primary-color = #333
secondary-color = #555
body
font-family font-family
background-color background-color
h1
color primary-color
font-size: 2em
p
color secondary-color
line-height: 1.6
3. 將 SCSS 或 CSS 轉換為 Stylus：
如果你有 SCSS 或 CSS 代碼，可以手動將它們轉換為 Stylus，去掉不必要的分號和花括號，並利用 Stylus 的特性進行優化。
4. 使用 Stylus 編譯器：
將 Stylus 代碼轉換為 CSS 需要使用 Stylus 編譯器，像是 node-stylus（一個 Node.js 的 Stylus 編譯器）。
安裝 Stylus 編譯器：
bash
npm install -g stylus
使用命令編譯 Stylus 文件：
bash
stylus input.styl -o output.css
小結：
將 CSS 轉換為 Stylus 主要是將 CSS 代碼轉換為 Stylus 語法，這樣你可以利用 Stylus 的強大功能來增強你的樣式表。Stylus 提供了靈活的語法選擇和豐富的特性，如變數、嵌套、混入和條件語句等，可以幫助你更高效地編寫和管理樣式。轉換過程中，你可以根據需要選擇是否使用分號和花括號，使得樣式更加簡潔或結構化。