本文介绍了JSS（JavaScript样式表）的特性和功能，包括常量、函数、分组、封装等概念。文档提供了使用JSS定义样式的示例和用法，通过对CSS的扩展，展示了如何创建可重用和动态的样式。主要讨论了常量运算和函数的定义与使用，以及如何进行样式继承和封装。

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

2. 十多年前⋯⋯

3. 四年前⋯⋯

4. 今天

5. 什么是JSS?

6. JSS解析

7. JavascriptActionscriptJSS解析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＋$num230px

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

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. CSStableth,table td{...}

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

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

30. JSStable (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. CSSdiv{+width:10px;-width:12px;?}

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

41. 继承

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

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

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

45. SassLessvs.

46. 举个栗子

47. 谢谢!classtyle.com/jss