Your SlideShare is downloading. ×
0
NetEase Mail FETC.<br />Hello, JSS!<br />孙极<br />
十多年前⋯⋯<br />
四年前⋯⋯<br />
今天<br />
什么是JSS?<br />
JSS解析<br />
Javascript<br />Actionscript<br />JSS解析<br />PHP<br />⋯⋯<br />
JSS的特性<br />
常量<br />
CSS<br />.mod1 { …color:#CC3300;… }<br />.mod2 { …background:#CC3300;… }<br />.mod3 { …border-color:#CC3300;… }<br />.mod4...
JSS<br />$color = “ #CC3300 ” ;<br />.mod1 { …color:$color;… }<br />.mod2 { …background:$color;… }<br />.mod3 { …border-co...
常量<br />定义常量:<br />$string1	=	”#CCC”;<br />$string2	=	”10px”;<br />$number1	=	10;<br />$number2	=	10px;<br />
常量<br />使用常量:<br />div{<br />color:$string1;<br />width:$number2;<br />}<br />
常量<br />常量运算:<br />$string1	=	”#CCC”;<br />$string2	=	”10px”;<br />$string1+$string2<br />#CCC10px<br />
常量<br />常量运算:<br />$num1	=	10px;<br />$num2	=	20;<br />$num1+$num2<br />30px<br />
常量<br />常量运算:<br />$string	=	“10px”;<br />$num	=	20;<br />$string+$num<br />10px20<br />
函数<br />
CSS<br />.mod1 {<br />...<br />-webkit-box-shadow:0 0 5px #999;<br />-moz-box-shadow:0 0 5px #999;<br />box-shadow:0 0 5px...
JSS<br />$shadow($x,$y,$s,$c){<br />-webkit-box-shadow:$x $y $s $c;<br />-moz-box-shadow:$x $y $s $c;<br />box-shadow:$x $...
JSS<br />$shadow($x,$y,$s,$c){<br />-webkit-box-shadow:$x $y $s $c;<br />-moz-box-shadow:$x $y $s $c;<br />box-shadow:$x $...
函数<br />定义函数:<br />$func(){<br />	color:#ccc;<br />}<br />
函数<br />定义函数:<br />$func($a,$b,$c){<br />	color:$a;<br />	background:$b;<br />	font-size:$c;<br />}<br />
函数<br />定义函数:<br />$func($a=“#ccc”,$b=“#000”,$c=12px){<br />	color:$a;<br />	background:$b;<br />	font-size:$c;<br />}<br />
函数<br />使用函数:<br />div{<br />$func();<br />}<br />
函数<br />使用函数:<br />div{<br />$func(“#000”,$string1)<br />}<br />
分组<br />
CSS<br />tableth,<br />table td{...}<br />
CSS<br />.parent>.child1,<br />.parent>.child2{...}<br />
CSS<br />.link1:hover,<br />.link1:active,<br />.link2:hover,<br />.link2:active{...}<br />
JSS<br />table  (th,td) {...}<br />
JSS<br />.parent>(.child1,.child2) {...}<br />
JSS<br />(.link1,.link2):(hover,active) {...}<br />
封装<br />
CSS<br />.mod .hd{...}<br />.mod .bd{...}<br />.mod .bd p{...}<br />.mod .bdtable{...}<br />.mod .ft{...}<br />
CSS<br />.mod_hd{...}<br />.mod_bd{...}<br />.mod_bd p{...}<br />.mod_bd table{...}<br />.mod_ft{...}<br />
JSS<br />.mod[[<br />	.hd{...}<br />.bd[[<br />		p{...}<br />	table{...}<br />	]]<br />	.ft{...}<br />]]<br />
JSS<br />.mod[[<br />	_hd{...}<br />_bd[[<br />		p{...}<br />	table{...}<br />	]]<br />	_ft{...}<br />]]<br />
Hack<br />
CSS<br />div{<br />+width:10px;<br />-width:12px;<br />?<br />}<br />
JSS<br />div{<br />-ie7-width:10px;<br />-wk-width:15px;<br />-!ie-width:18px;<br />-?sunji-width:20px;<br />...<br />}<br />
继承<br />
CSS<br />.mod<br />.newMod<br />class=“mod newMod”<br />
JSS<br />.newMod,<br />.mod[[<br />	...<br />]]<br />
JSS<br />$mod($s){<br />$s{...}<br />($s) p{...}<br />}<br />$mod (“.mod,.newMod”);<br />
Sass<br />Less<br />vs.<br />
举个栗子<br />
谢谢!<br />classtyle.com/jss<br />
Upcoming SlideShare
Loading in...5
×

孙极-Hello, JSS! - 一种新样式语言的诞生

1,365

Published on

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,365
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
48
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "孙极-Hello, JSS! - 一种新样式语言的诞生"

  1. 1. NetEase Mail FETC.<br />Hello, JSS!<br />孙极<br />
  2. 2. 十多年前⋯⋯<br />
  3. 3. 四年前⋯⋯<br />
  4. 4. 今天<br />
  5. 5. 什么是JSS?<br />
  6. 6. JSS解析<br />
  7. 7. Javascript<br />Actionscript<br />JSS解析<br />PHP<br />⋯⋯<br />
  8. 8. JSS的特性<br />
  9. 9. 常量<br />
  10. 10. CSS<br />.mod1 { …color:#CC3300;… }<br />.mod2 { …background:#CC3300;… }<br />.mod3 { …border-color:#CC3300;… }<br />.mod4 { …outline:#CC3300;… }<br />…<br />
  11. 11. JSS<br />$color = “ #CC3300 ” ;<br />.mod1 { …color:$color;… }<br />.mod2 { …background:$color;… }<br />.mod3 { …border-color:$color;… }<br />.mod4 { …outline:$color;… }<br />…<br />
  12. 12. 常量<br />定义常量:<br />$string1 = ”#CCC”;<br />$string2 = ”10px”;<br />$number1 = 10;<br />$number2 = 10px;<br />
  13. 13. 常量<br />使用常量:<br />div{<br />color:$string1;<br />width:$number2;<br />}<br />
  14. 14. 常量<br />常量运算:<br />$string1 = ”#CCC”;<br />$string2 = ”10px”;<br />$string1+$string2<br />#CCC10px<br />
  15. 15. 常量<br />常量运算:<br />$num1 = 10px;<br />$num2 = 20;<br />$num1+$num2<br />30px<br />
  16. 16. 常量<br />常量运算:<br />$string = “10px”;<br />$num = 20;<br />$string+$num<br />10px20<br />
  17. 17. 函数<br />
  18. 18. CSS<br />.mod1 {<br />...<br />-webkit-box-shadow:0 0 5px #999;<br />-moz-box-shadow:0 0 5px #999;<br />box-shadow:0 0 5px #999;<br />...<br />}<br />.mod2 {<br />...<br />-webkit-box-shadow:0 0 6px #CCC;<br />-moz-box-shadow:0 0 6px #CCC;<br />box-shadow:0 0 6px #CCC;<br />...<br />}<br />...<br />
  19. 19. JSS<br />$shadow($x,$y,$s,$c){<br />-webkit-box-shadow:$x $y $s $c;<br />-moz-box-shadow:$x $y $s $c;<br />box-shadow:$x $y $s $c;<br />}<br />
  20. 20. JSS<br />$shadow($x,$y,$s,$c){<br />-webkit-box-shadow:$x $y $s $c;<br />-moz-box-shadow:$x $y $s $c;<br />box-shadow:$x $y $s $c;<br />}<br />.mod1 {<br /> …<br />$shadow(0,0,5px,”#999”);<br /> …<br />}<br />.mod2 {<br /> …<br />$shadow(0,0,8px,”#ccc”);<br /> …<br />}<br />
  21. 21. 函数<br />定义函数:<br />$func(){<br /> color:#ccc;<br />}<br />
  22. 22. 函数<br />定义函数:<br />$func($a,$b,$c){<br /> color:$a;<br /> background:$b;<br /> font-size:$c;<br />}<br />
  23. 23. 函数<br />定义函数:<br />$func($a=“#ccc”,$b=“#000”,$c=12px){<br /> color:$a;<br /> background:$b;<br /> font-size:$c;<br />}<br />
  24. 24. 函数<br />使用函数:<br />div{<br />$func();<br />}<br />
  25. 25. 函数<br />使用函数:<br />div{<br />$func(“#000”,$string1)<br />}<br />
  26. 26. 分组<br />
  27. 27. CSS<br />tableth,<br />table td{...}<br />
  28. 28. CSS<br />.parent>.child1,<br />.parent>.child2{...}<br />
  29. 29. CSS<br />.link1:hover,<br />.link1:active,<br />.link2:hover,<br />.link2:active{...}<br />
  30. 30. JSS<br />table (th,td) {...}<br />
  31. 31. JSS<br />.parent>(.child1,.child2) {...}<br />
  32. 32. JSS<br />(.link1,.link2):(hover,active) {...}<br />
  33. 33. 封装<br />
  34. 34. CSS<br />.mod .hd{...}<br />.mod .bd{...}<br />.mod .bd p{...}<br />.mod .bdtable{...}<br />.mod .ft{...}<br />
  35. 35. CSS<br />.mod_hd{...}<br />.mod_bd{...}<br />.mod_bd p{...}<br />.mod_bd table{...}<br />.mod_ft{...}<br />
  36. 36. JSS<br />.mod[[<br /> .hd{...}<br />.bd[[<br /> p{...}<br /> table{...}<br /> ]]<br /> .ft{...}<br />]]<br />
  37. 37. JSS<br />.mod[[<br /> _hd{...}<br />_bd[[<br /> p{...}<br /> table{...}<br /> ]]<br /> _ft{...}<br />]]<br />
  38. 38. Hack<br />
  39. 39. CSS<br />div{<br />+width:10px;<br />-width:12px;<br />?<br />}<br />
  40. 40. JSS<br />div{<br />-ie7-width:10px;<br />-wk-width:15px;<br />-!ie-width:18px;<br />-?sunji-width:20px;<br />...<br />}<br />
  41. 41. 继承<br />
  42. 42. CSS<br />.mod<br />.newMod<br />class=“mod newMod”<br />
  43. 43. JSS<br />.newMod,<br />.mod[[<br /> ...<br />]]<br />
  44. 44. JSS<br />$mod($s){<br />$s{...}<br />($s) p{...}<br />}<br />$mod (“.mod,.newMod”);<br />
  45. 45. Sass<br />Less<br />vs.<br />
  46. 46. 举个栗子<br />
  47. 47. 谢谢!<br />classtyle.com/jss<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×