Jass in coserv

JASS in Coservnode.js 原生 CSS 管理套件

JASS( Just Awesome Style Sheet)

特性與 SASS 類似• 主要功能：變數、巢狀撰寫、 Mixins( 混用／函式 ) 、繼承 ( 擴充 )

維持 CSS 原來語法，不必學習新的語法

直接以 Javascript 實作

情境

web

三組文字連結顏色樣式

藍色

綠色

白色

CSS 程式碼超過 3000 多行

有文字連結顏色的設定共 85行

情境

web

CSS 程式碼超過 3000 多行三組文字連結顏色樣式

藍色

綠色

白色


原本綠色太亮，想要暗點的綠色( 改成 #227700)

客戶

情境

web


藍色

綠色

白色


開發者

逐一瀏覽並修改？利用取代工具替

換字串？

情境

web


藍色

綠色

白色


開發者

逐一瀏覽並修改？利用取代工具替

換字串？JASS

功能一： Variables 變數在 CSS 檔內嵌一個 JS 變數

呼叫方法

白色藍色

綠色

功能一： Variables 變數 ( 進階用法 )

jass.p() 將 Javascript 物件以 CSS 的語法印出

類似函式省去重複撰寫相同 CSS 樣式的時間

功能二： Mixins ( 混用 )

利用 jass.p() 函數印出” borderRadius” 的 return 值

功能三： Extend ( 擴充 / 繼承 )

繼承 CSS 規則中的屬性

• 製作一個選單時， CSS 或許會這樣寫

功能四： Nesting ( 巢狀疊套 )

重複撰寫 .menu


jass.r() 用來建立 CSS 規則


也可將變數代入


將 r_ul 、 r_li 等四條規則附加到規則 rMenu 下


最後再將 rMenu 印出

練習時間利用 JASS 製作一個按鈕樣式

需使用的功能• Variables( 變數 )

• Mixins( 混用／函式 )

• Extend( 擴充／繼承 )

可參考範例檔

Software

Jass in coserv