网易邮箱资深页面架构工程师孙极，男，86年出生，4年前端经验，参与了网易邮箱极速4、iPad和iPhone版开发。主题《Hello, JSS! - 一种新样式语言的诞生》

1. NetEase Mail FETC. Hello, JSS! 孙极

2. 十多年前⋯⋯

3. 四年前⋯⋯

4. 今天

5. 什么是JSS?

6. JSS解析

7. Javascript Actionscript JSS解析 PHP ⋯⋯

8. JSS的特性

9. 常量

10. CSS .mod1 { …color:#CC3300;… } .mod2 { …background:#CC3300;… } .mod3 { …border-color:#CC3300;… } .mod4 { …outline:#CC3300;… } …

11. JSS $color = “ #CC3300 ” ; .mod1 { …color:$color;… } .mod2 { …background:$color;… } .mod3 { …border-color:$color;… } .mod4 { …outline:$color;… } …

12. 常量 定义常量： $string1 = ”#CCC”; $string2 = ”10px”; $number1 = 10; $number2 = 10px;

13. 常量 使用常量： div{ color:$string1; width:$number2; }

14. 常量 常量运算： $string1 = ”#CCC”; $string2 = ”10px”; $string1＋$string2 #CCC10px

15. 常量 常量运算： $num1 = 10px; $num2 = 20; $num1＋$num2 30px

16. 常量 常量运算： $string = “10px”; $num = 20; $string＋$num 10px20

17. 函数

18. CSS .mod1 { ... -webkit-box-shadow:0 0 5px #999; -moz-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999; ... } .mod2 { ... -webkit-box-shadow:0 0 6px #CCC; -moz-box-shadow:0 0 6px #CCC; box-shadow:0 0 6px #CCC; ... } ...

19. JSS $shadow($x,$y,$s,$c){ -webkit-box-shadow:$x $y $s $c; -moz-box-shadow:$x $y $s $c; box-shadow:$x $y $s $c; }

20. JSS $shadow($x,$y,$s,$c){ -webkit-box-shadow:$x $y $s $c; -moz-box-shadow:$x $y $s $c; box-shadow:$x $y $s $c; } .mod1 { … $shadow(0,0,5px,”#999”); … } .mod2 { … $shadow(0,0,8px,”#ccc”); … }

21. 函数 定义函数： $func(){ color:#ccc; }

22. 函数 定义函数： $func($a,$b,$c){ color:$a; background:$b; font-size:$c; }

23. 函数 定义函数： $func($a=“#ccc”,$b=“#000”,$c=12px){ color:$a; background:$b; font-size:$c; }

24. 函数 使用函数： div{ $func(); }

25. 函数 使用函数： div{ $func(“#000”,$string1) }

26. 分组

27. CSS tableth, table td{...}

28. CSS .parent>.child1, .parent>.child2{...}

29. CSS .link1:hover, .link1:active, .link2:hover, .link2:active{...}

30. JSS table (th,td) {...}

31. JSS .parent>(.child1,.child2) {...}

32. JSS (.link1,.link2):(hover,active) {...}

33. 封装

34. CSS .mod .hd{...} .mod .bd{...} .mod .bd p{...} .mod .bdtable{...} .mod .ft{...}

35. CSS .mod_hd{...} .mod_bd{...} .mod_bd p{...} .mod_bd table{...} .mod_ft{...}

36. JSS .mod[[ .hd{...} .bd[[ p{...} table{...} ]] .ft{...} ]]

37. JSS .mod[[ _hd{...} _bd[[ p{...} table{...} ]] _ft{...} ]]

38. Hack

39. CSS div{ +width:10px; -width:12px; ? }

40. JSS div{ -ie7-width:10px; -wk-width:15px; -!ie-width:18px; -?sunji-width:20px; ... }

41. 继承

42. CSS .mod .newMod class=“mod newMod”

43. JSS .newMod, .mod[[ ... ]]

44. JSS $mod($s){ $s{...} ($s) p{...} } $mod (“.mod,.newMod”);

45. Sass Less vs.

46. 举个栗子

47. 谢谢! classtyle.com/jss