Suche senden
Hochladen
孙极-Hello, JSS! - 一种新样式语言的诞生
•
Als PPTX, PDF herunterladen
•
3 gefällt mir
•
578 views
W
Webrebuild
Folgen
网易邮箱资深页面架构工程师孙极,男,86年出生,4年前端经验,参与了网易邮箱极速4、iPad和iPhone版开发。主题《Hello, JSS! - 一种新样式语言的诞生》
Weniger lesen
Mehr lesen
Technologie
Unterhaltung & Humor
Melden
Teilen
Melden
Teilen
1 von 47
Jetzt herunterladen
Empfohlen
Json知识分享
Json知识分享
Qianhan Chen
Mongodb
Mongodb
bj
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
9scss
石玉磊 Web rebuild
石玉磊 Web rebuild
Webrebuild
重构 这一路走来
重构 这一路走来
Webrebuild
Marketing planoutline
Marketing planoutline
jdeanda
迅雷邹惠斌(Impact) 移动设备web重构
迅雷邹惠斌(Impact) 移动设备web重构
Webrebuild
Neielaist krīzi dvēselē
Neielaist krīzi dvēselē
violastrode
Empfohlen
Json知识分享
Json知识分享
Qianhan Chen
Mongodb
Mongodb
bj
第十期 阿甘Javascript开发思想(入门篇)
第十期 阿甘Javascript开发思想(入门篇)
9scss
石玉磊 Web rebuild
石玉磊 Web rebuild
Webrebuild
重构 这一路走来
重构 这一路走来
Webrebuild
Marketing planoutline
Marketing planoutline
jdeanda
迅雷邹惠斌(Impact) 移动设备web重构
迅雷邹惠斌(Impact) 移动设备web重构
Webrebuild
Neielaist krīzi dvēselē
Neielaist krīzi dvēselē
violastrode
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
重构经验分享
重构经验分享
TenJessy
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Less is more
Less is more
simplelife7
Less is more!?
Less is more!?
simplelife7
3sss book
3sss book
Hina Chen
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Duran Hsieh
恶意网页分析实战
恶意网页分析实战
Huang Toby
史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js
Frank Cheung
面向开发的前端性能优化
面向开发的前端性能优化
li qiang
Mongo db introduction
Mongo db introduction
Dai Qifeng
SSDB 入门基础
SSDB 入门基础
ideawu
Talking about exploit writing
Talking about exploit writing
sbha0909
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
Css
Css
fzuhua
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
Webrebuild
Script with engine
Script with engine
Webrebuild
Css3之颜色与半透明
Css3之颜色与半透明
Webrebuild
移动网站的兼容性探索
移动网站的兼容性探索
Webrebuild
陈子舜-Html5 based web app
陈子舜-Html5 based web app
Webrebuild
谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用
Webrebuild
Weitere ähnliche Inhalte
Ähnlich wie 孙极-Hello, JSS! - 一种新样式语言的诞生
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
重构经验分享
重构经验分享
TenJessy
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
Less is more
Less is more
simplelife7
Less is more!?
Less is more!?
simplelife7
3sss book
3sss book
Hina Chen
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Duran Hsieh
恶意网页分析实战
恶意网页分析实战
Huang Toby
史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js
Frank Cheung
面向开发的前端性能优化
面向开发的前端性能优化
li qiang
Mongo db introduction
Mongo db introduction
Dai Qifeng
SSDB 入门基础
SSDB 入门基础
ideawu
Talking about exploit writing
Talking about exploit writing
sbha0909
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
Css
Css
fzuhua
Ähnlich wie 孙极-Hello, JSS! - 一种新样式语言的诞生
(16)
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
重构经验分享
重构经验分享
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Less is more
Less is more
Less is more!?
Less is more!?
3sss book
3sss book
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
恶意网页分析实战
恶意网页分析实战
史前的Ssjs——从js的asp到node js
史前的Ssjs——从js的asp到node js
面向开发的前端性能优化
面向开发的前端性能优化
Mongo db introduction
Mongo db introduction
SSDB 入门基础
SSDB 入门基础
Talking about exploit writing
Talking about exploit writing
不一樣的Web server... coServ
不一樣的Web server... coServ
Css
Css
Mehr von Webrebuild
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
Webrebuild
Script with engine
Script with engine
Webrebuild
Css3之颜色与半透明
Css3之颜色与半透明
Webrebuild
移动网站的兼容性探索
移动网站的兼容性探索
Webrebuild
陈子舜-Html5 based web app
陈子舜-Html5 based web app
Webrebuild
谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用
Webrebuild
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
微观重构 黄婉芳
微观重构 黄婉芳
Webrebuild
年会主持 By pufen
年会主持 By pufen
Webrebuild
年会主持 By pufen
年会主持 By pufen
Webrebuild
Css schema by_sofish
Css schema by_sofish
Webrebuild
重构的价值转化 By impact
重构的价值转化 By impact
Webrebuild
七年之痒Webrebuild by emu
七年之痒Webrebuild by emu
Webrebuild
Qmail rebuild_by_nico
Qmail rebuild_by_nico
Webrebuild
潘杰茂_网络图像优化
潘杰茂_网络图像优化
Webrebuild
张思坚 浏览器兼容性
张思坚 浏览器兼容性
Webrebuild
飘飘 年会主持
飘飘 年会主持
Webrebuild
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild
Webrebuild
陈军 Scrum敏捷项目管理-重构年会
陈军 Scrum敏捷项目管理-重构年会
Webrebuild
郑焕义 重温网站重构
郑焕义 重温网站重构
Webrebuild
Mehr von Webrebuild
(20)
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
Script with engine
Script with engine
Css3之颜色与半透明
Css3之颜色与半透明
移动网站的兼容性探索
移动网站的兼容性探索
陈子舜-Html5 based web app
陈子舜-Html5 based web app
谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
微观重构 黄婉芳
微观重构 黄婉芳
年会主持 By pufen
年会主持 By pufen
年会主持 By pufen
年会主持 By pufen
Css schema by_sofish
Css schema by_sofish
重构的价值转化 By impact
重构的价值转化 By impact
七年之痒Webrebuild by emu
七年之痒Webrebuild by emu
Qmail rebuild_by_nico
Qmail rebuild_by_nico
潘杰茂_网络图像优化
潘杰茂_网络图像优化
张思坚 浏览器兼容性
张思坚 浏览器兼容性
飘飘 年会主持
飘飘 年会主持
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild
陈军 Scrum敏捷项目管理-重构年会
陈军 Scrum敏捷项目管理-重构年会
郑焕义 重温网站重构
郑焕义 重温网站重构
孙极-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
Jetzt herunterladen