Stylus轉CSS

Stylus 轉 CSS：適合整理簡單樣式片段

本頁可將基本的 Stylus 縮排寫法整理成帶有大括號、冒號與分號的 CSS。適合輸入平面選擇器，以及以固定 CSS 值寫成的屬性宣告；畫面提供文字輸入、方向切換、載入範例、清空與複製輸出等操作。轉換方向初始為 CSS → Stylus，若要把 Stylus 整理成 CSS，先切換方向，確認輸入欄標示 Stylus、輸出欄標示 CSS，再貼上內容。

縮排如何對應到 CSS 規則

Stylus 可用縮排表示選擇器區塊；CSS 則以大括號包住屬性宣告，並以冒號分隔屬性與值。簡單轉換時，選擇器放在行首，下一層縮排寫屬性和值，例如 color #333；輸出會整理成 color: #333;。同一個規則區塊中的屬性需維持一致縮排。這項轉換將屬性名稱和值重新排成 CSS 宣告，便於對照兩種文字結構。

短例子：把兩個屬性整理成 CSS

輸入可先用一個選擇器和幾個固定值測試：

.card
  color #333
  padding 12px

轉換後的結構如下：

.card {
  color: #333;
  padding: 12px;
}

輸出欄是可複製的文字結果。把它貼回樣式檔後，再檢查選擇器、屬性和值是否符合原本的版面需求。

Stylus 官方文件中的語言能力

Stylus 官方文件列有變數、混入、函式、匯入與巢狀選擇器等語言功能；官方 JavaScript API 也說明可用 render() 執行完整編譯。兩份原始文件連結列於下方，供查閱語言與 API 定義。

先確認方向，再處理輸出

1. 切換成 Stylus → CSS

   頁面初始方向是 CSS → Stylus。按方向切換鈕，直到輸入欄顯示 Stylus、輸出欄顯示 CSS；若目前內容不是要轉換的內容，可先清空。

2. 貼上小段程式碼

   先用一個選擇器與幾個固定屬性值試轉，例如 .card 下一層寫 color #333、padding 12px。確認屬性行位於選擇器下方，且同一層縮排一致。

3. 執行轉換並讀取結果

   按下轉換後，CSS 會顯示在右側輸出欄；有語法錯誤時，依錯誤提示調整輸入。若使用方向切換鈕反轉模式，現有輸出會移到輸入欄，輸出欄則清空。

4. 複製並回到專案檢查

   使用輸出欄旁的複製功能，再將結果放回原本的樣式檔或建置流程中檢查。

方向與輸出常見疑問

預覽範圍與交付前檢查

這項功能只適合平面選擇器與字面 CSS 屬性值的簡易預覽，不是完整 Stylus 編譯器。

• 變數、混入、匯入、Stylus 運算式與函式，以及巢狀選擇器不在此預覽支援範圍；遇到這些語法時，請使用專案中的完整 Stylus 編譯流程。
• 遇到無法識別的選擇器或屬性值時，畫面會顯示錯誤；不要只因輸出欄看起來像 CSS，就視為已通過語法、建置或瀏覽器相容性檢查。
• 複製結果後，請在實際專案中確認選擇器層級、屬性值、依賴樣式與最終呈現；重要樣式變更前保留原始檔以便回復。