Download - 孙极-Hello, JSS! - 一种新样式语言的诞生
![Page 1: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/1.jpg)
Hello, JSS!
NetEase Mail FETC.
孙极
![Page 2: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/2.jpg)
十多年前⋯⋯
![Page 3: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/3.jpg)
四年前⋯⋯
![Page 4: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/4.jpg)
今天
![Page 5: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/5.jpg)
什么是 JSS?
![Page 6: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/6.jpg)
JSS解析
![Page 7: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/7.jpg)
JSS解析
JavascriptActionscriptPHP⋯⋯
![Page 8: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/8.jpg)
JSS的特性
![Page 9: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/9.jpg)
常量
![Page 10: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/10.jpg)
CSS
.mod1 { …color:#CC3300;… }
.mod2 { …background:#CC3300;… }
.mod3 { …border-color:#CC3300;… }
.mod4 { …outline:#CC3300;… }…
![Page 11: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/11.jpg)
JSS
$color = “ #CC3300 ” ;
.mod1 { …color:$color;… }
.mod2 { …background:$color;… }
.mod3 { …border-color:$color;… }
.mod4 { …outline:$color;… }…
![Page 12: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/12.jpg)
常量
定义常量:$string1 = ”#CCC”;$string2 = ”10px”;$number1 = 10;$number2 = 10px;
![Page 13: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/13.jpg)
常量
使用常量:div{
color:$string1;width:$number2;
}
![Page 14: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/14.jpg)
常量
常量运算:$string1 = ”#CCC”;$string2 = ”10px”;
$string1+ $string2 #CCC10px
![Page 15: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/15.jpg)
常量
常量运算:$num1 = 10px;$num2 = 20;
$num1+ $num2 30px
![Page 16: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/16.jpg)
常量
常量运算:$string = “10px”;$num = 20;
$string+ $num 10px20
![Page 17: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/17.jpg)
函数
![Page 18: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/18.jpg)
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;...
}...
![Page 19: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/19.jpg)
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;
}
![Page 20: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/20.jpg)
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”);…
}
![Page 21: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/21.jpg)
函数
定义函数:$func(){
color:#ccc;}
![Page 22: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/22.jpg)
函数
定义函数:$func($a,$b,$c){
color:$a;background:$b;font-size:$c;
}
![Page 23: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/23.jpg)
函数
定义函数:$func($a=“#ccc”,$b=“#000”,$c=12px){
color:$a;background:$b;font-size:$c;
}
![Page 24: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/24.jpg)
函数
使用函数:div{
$func();}
![Page 25: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/25.jpg)
函数
使用函数:div{
$func(“#000”,$string1)}
![Page 26: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/26.jpg)
分组
![Page 27: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/27.jpg)
CSS
table th,table td{...}
![Page 28: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/28.jpg)
CSS
.parent>.child1,
.parent>.child2{...}
![Page 29: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/29.jpg)
CSS
.link1:hover,
.link1:active,
.link2:hover,
.link2:active{...}
![Page 30: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/30.jpg)
JSS
table (th,td) {...}
![Page 31: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/31.jpg)
JSS
.parent>(.child1,.child2) {...}
![Page 32: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/32.jpg)
JSS
(.link1,.link2):(hover,active) {...}
![Page 33: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/33.jpg)
封装
![Page 34: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/34.jpg)
CSS
.mod .hd{...}
.mod .bd{...}
.mod .bd p{...}
.mod .bd table{...}
.mod .ft{...}
![Page 35: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/35.jpg)
CSS
.mod_hd{...}
.mod_bd{...}
.mod_bd p{...}
.mod_bd table{...}
.mod_ft{...}
![Page 36: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/36.jpg)
JSS
.mod[[.hd{...}.bd[[
p{...}table{...}
]].ft{...}
]]
![Page 37: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/37.jpg)
JSS
.mod[[_hd{...}_bd[[
p{...}table{...}
]]_ft{...}
]]
![Page 38: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/38.jpg)
Hack
![Page 39: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/39.jpg)
CSS
div{+width:10px;-width:12px;?
}
![Page 40: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/40.jpg)
JSS
div{-ie7-width:10px;-wk-width:15px;-!ie-width:18px;-?sunji-width:20px;...
}
![Page 41: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/41.jpg)
继承
![Page 42: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/42.jpg)
.mod
.newMod
class=“mod newMod”
CSS
![Page 43: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/43.jpg)
JSS
.newMod,
.mod[[...
]]
![Page 44: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/44.jpg)
JSS
$mod($s){$s{...}($s) p{...}
}
$mod (“.mod,.newMod”);
![Page 45: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/45.jpg)
vs. SassLess
![Page 46: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/46.jpg)
举个栗子
![Page 47: 孙极-Hello, JSS! - 一种新样式语言的诞生](https://reader033.vdocuments.net/reader033/viewer/2022061211/5492a348b479594c4d8b464e/html5/thumbnails/47.jpg)
谢谢 !classtyle.com/jss