利用coserv撰寫Jass

1. JASS in Coserv
node.js 原生 CSS 管理套件

2. JASS( Just Awesome Style Sheet)
特性與SASS類似
• 主要功能：變數、巢狀撰寫、 Mixins(混用／函式) 、繼承(擴充)
維持 CSS 原來語法，不必學習新的語法
直接以 Javascript 實作

3. 情境
web
三組文字連結顏色樣式
藍色
綠色
白色
CSS程式碼超過3000多行
有文字連結顏色的設定共85行

4. 情境
web
CSS程式碼超過3000多行三組文字連結顏色樣式
藍色
綠色
白色
有文字連結顏色的設定共85行
原本綠色太亮，
想要暗點的綠色
(改成#227700)
客戶

5. 情境
web
CSS程式碼超過3000多行三組文字連結顏色樣式
藍色
綠色
白色
有文字連結顏色的設定共85行
開發者
逐一瀏覽並修改？
利用取代工具替
換字串？

6. 情境
web
CSS程式碼超過3000多行三組文字連結顏色樣式
藍色
綠色
白色
有文字連結顏色的設定共85行
開發者
逐一瀏覽並修改？
利用取代工具替
換字串？JASS

7. 功能一： Variables變數
在CSS檔內嵌一個JS變數
呼叫方法
白色
藍色
綠色

8. 功能一： Variables變數(進階用法)
jass.p()將 Javascript
物件以 CSS 的語法
印出

9. 類似函式
省去重複撰寫相同CSS樣式的時間
功能二： Mixins (混用)
利用jass.p()函數印出”borderRadius”的return 值

10. 功能三： Extend (擴充/繼承)
繼承 CSS 規則中的屬性

11. • 製作一個選單時，CSS或許會這樣寫
功能四： Nesting (巢狀疊套)
重複撰寫.menu

12. 功能四： Nesting (巢狀疊套)
jass.r() 用來建立 CSS 規則

13. 功能四： Nesting (巢狀疊套)
也可將變數代入

14. 功能四： Nesting (巢狀疊套)
將 r_ul 、 r_li等四條規則附加到規則 rMenu 下

15. 功能四： Nesting (巢狀疊套)
最後再將 rMenu 印出

16. 練習時間
利用JASS製作一個按鈕樣式
需使用的功能
• Variables(變數)
• Mixins(混用／函式)
• Extend(擴充／繼承)
可參考範例檔