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

Hello, JSS!

NetEase Mail FETC.

孙极

十多年前⋯⋯

四年前⋯⋯

今天

什么是 JSS?

JSS解析

JSS解析

JavascriptActionscriptPHP⋯⋯

JSS的特性

常量

CSS

.mod1 { …color:#CC3300;… }

.mod2 { …background:#CC3300;… }

.mod3 { …border-color:#CC3300;… }

.mod4 { …outline:#CC3300;… }…

JSS

$color = “ #CC3300 ” ;

.mod1 { …color:$color;… }

.mod2 { …background:$color;… }

.mod3 { …border-color:$color;… }

.mod4 { …outline:$color;… }…

常量

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

常量

使用常量：div{

color:$string1;width:$number2;

}

常量

常量运算：$string1 = ”#CCC”;$string2 = ”10px”;

$string1＋ $string2 #CCC10px

常量

常量运算：$num1 = 10px;$num2 = 20;

$num1＋ $num2 30px

常量

常量运算：$string = “10px”;$num = 20;

$string＋ $num 10px20

函数

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;...

}...

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;

}

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”);…

}

函数

定义函数：$func(){

color:#ccc;}

函数

定义函数：$func($a,$b,$c){

color:$a;background:$b;font-size:$c;

}

函数

定义函数：$func($a=“#ccc”,$b=“#000”,$c=12px){

color:$a;background:$b;font-size:$c;

}

函数

使用函数：div{

$func();}

函数

使用函数：div{

$func(“#000”,$string1)}

分组

CSS

table th,table td{...}

CSS

.parent>.child1,

.parent>.child2{...}

CSS

.link1:hover,

.link1:active,

.link2:hover,

.link2:active{...}

JSS

table (th,td) {...}

JSS

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

JSS

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

封装

CSS

.mod .hd{...}

.mod .bd{...}

.mod .bd p{...}

.mod .bd table{...}

.mod .ft{...}

CSS

.mod_hd{...}

.mod_bd{...}

.mod_bd p{...}

.mod_bd table{...}

.mod_ft{...}

JSS

.mod[[.hd{...}.bd[[

p{...}table{...}

]].ft{...}

]]

JSS

.mod[[_hd{...}_bd[[

p{...}table{...}

]]_ft{...}

]]

Hack

CSS

div{+width:10px;-width:12px;?

}

JSS

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

}

继承

.mod

.newMod

class=“mod newMod”

CSS

JSS

.newMod,

.mod[[...

]]

JSS

$mod($s){$s{...}($s) p{...}

}

$mod (“.mod,.newMod”);

vs. SassLess

举个栗子

谢谢 !classtyle.com/jss