/* logo */
#logo {
background-image: url("/images/logo.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url("/images/logo@2x.png");
background-size: auto auto;
}
}
#logo {
background-image: url("/images/logo.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url("/images/logo@2x.png");
background-size: 50px 100px;
}
}
/* sink-footer */
#sink-footer {
padding-bottom: 262px;
}
#sink-footer:before,
#sink-footer:after {
content: " ";
display: table;
}
#sink-footer:after {
clear: both;
}
.sink-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* footer */
#footer-wrapper {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
footer {
padding: 0px 20px;
min-height: 80px;
background: #333;
color: #b0b0b0;
-webkit-box-shadow: 0 0 0 5px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.35);
-moz-box-shadow: 0 0 0 5px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.35);
box-shadow: 0 0 0 5px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.35);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
footer .copyright {
margin: 32px 0 0;
}
footer .copyright a {
color: #eee;
}
footer.fixed-to-bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
make you confused
make you clear
@import '../node_modules/nib'
$footer-color = #b0b0b0
$copyright-color = #eee
// logo
#logo {
image: '/images/logo.png'
}
#logo {
image: '/images/logo.png' 50px 100px
}
// sink-footer
#sink-footer
padding-bottom 262px
clearfix()
.sink-text
overflow ellipsis
// footer
#footer-wrapper
absolute bottom 0 left 0
width 100%
footer
padding 0 20px
min-height 80px
background $footer-color
box-shadow(0 0 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.35))
box-sizing(border-box)
&.fixed-to-bottom
absolute bottom 0 left 0
.copyright
margin 32px 0 0
a
color $copyright-color
CSS preprocessor解决了传统CSS代码的以下问题
for i in 1..12
'.span' + i
width -30+85*i px
for i in 1..12
'.offset' + i
margin-left 30+85*i px
.offset1 {
margin-left: 115px;
}
.offset2 {
margin-left: 200px;
}
.offset3 {
margin-left: 285px;
}
.offset4 {
margin-left: 370px;
}
.offset5 {
margin-left: 455px;
}
.offset6 {
margin-left: 540px;
}
.offset7 {
margin-left: 625px;
}
.offset8 {
margin-left: 710px;
}
.offset9 {
margin-left: 795px;
}
.offset10 {
margin-left: 880px;
}
.offset11 {
margin-left: 965px;
}
.offset12 {
margin-left: 1050px;
}
.span1 {
width: 55px;
}
.span2 {
width: 140px;
}
.span3 {
width: 225px;
}
.span4 {
width: 310px;
}
.span5 {
width: 395px;
}
.span6 {
width: 480px;
}
.span7 {
width: 565px;
}
.span8 {
width: 650px;
}
.span9 {
width: 735px;
}
.span10 {
width: 820px;
}
.span11 {
width: 905px;
}
.span12 {
width: 990px;
}
stylus
compiled css
$keyframe-name = 'editing-large'
@keyframes {$keyframe-name}
for i in 0..10
{10% * i}
if i%2 == 0
left (8*1+13)px
else
left (8*-1+13)px
$keyframe-name = 'editing-small'
@keyframes {$keyframe-name}
for i in 0..10
{10% * i}
if i%2 == 0
left (5*1+7)px
else
left (5*-1+7)px
@-moz-keyframes editing-large {
0% {
left: 21px;
}
10% {
left: 5px;
}
20% {
left: 21px;
}
30% {
left: 5px;
}
40% {
left: 21px;
}
50% {
left: 5px;
}
60% {
left: 21px;
}
70% {
left: 5px;
}
80% {
left: 21px;
}
90% {
left: 5px;
}
100% {
left: 21px;
}
}
@-webkit-keyframes editing-large {
0% {
left: 21px;
}
10% {
left: 5px;
}
20% {
left: 21px;
}
30% {
left: 5px;
}
40% {
left: 21px;
}
50% {
left: 5px;
}
60% {
left: 21px;
}
70% {
left: 5px;
}
80% {
left: 21px;
}
90% {
left: 5px;
}
100% {
left: 21px;
}
}
@-o-keyframes editing-large {
0% {
left: 21px;
}
10% {
left: 5px;
}
20% {
left: 21px;
}
30% {
left: 5px;
}
40% {
left: 21px;
}
50% {
left: 5px;
}
60% {
left: 21px;
}
70% {
left: 5px;
}
80% {
left: 21px;
}
90% {
left: 5px;
}
100% {
left: 21px;
}
}
@keyframes editing-large {
0% {
left: 21px;
}
10% {
left: 5px;
}
20% {
left: 21px;
}
30% {
left: 5px;
}
40% {
left: 21px;
}
50% {
left: 5px;
}
60% {
left: 21px;
}
70% {
left: 5px;
}
80% {
left: 21px;
}
90% {
left: 5px;
}
100% {
left: 21px;
}
}
@-moz-keyframes editing-small {
0% {
left: 12px;
}
10% {
left: 2px;
}
20% {
left: 12px;
}
30% {
left: 2px;
}
40% {
left: 12px;
}
50% {
left: 2px;
}
60% {
left: 12px;
}
70% {
left: 2px;
}
80% {
left: 12px;
}
90% {
left: 2px;
}
100% {
left: 12px;
}
}
@-webkit-keyframes editing-small {
0% {
left: 12px;
}
10% {
left: 2px;
}
20% {
left: 12px;
}
30% {
left: 2px;
}
40% {
left: 12px;
}
50% {
left: 2px;
}
60% {
left: 12px;
}
70% {
left: 2px;
}
80% {
left: 12px;
}
90% {
left: 2px;
}
100% {
left: 12px;
}
}
@-o-keyframes editing-small {
0% {
left: 12px;
}
10% {
left: 2px;
}
20% {
left: 12px;
}
30% {
left: 2px;
}
40% {
left: 12px;
}
50% {
left: 2px;
}
60% {
left: 12px;
}
70% {
left: 2px;
}
80% {
left: 12px;
}
90% {
left: 2px;
}
100% {
left: 12px;
}
}
@keyframes editing-small {
0% {
left: 12px;
}
10% {
left: 2px;
}
20% {
left: 12px;
}
30% {
left: 2px;
}
40% {
left: 12px;
}
50% {
left: 2px;
}
60% {
left: 12px;
}
70% {
left: 2px;
}
80% {
left: 12px;
}
90% {
left: 2px;
}
100% {
left: 12px;
}
}
Myth
star 3249 watch 99 fork 104 issue 11 commits 148
Less:
Sass:
Stylus:
Myth:
star 5005 watch 234 fork 668 issue 150 commits 3561
star 4739 watch 416 fork 875 issue 119 commits 5847
star 11284 watch 626 fork 2497 issue 194 commits 1862
until 2014/9/16
CSS语法扩展的保守派先驱 —— by 我自己
Less Hat
if ('你只是做简单的web app demo' ||
'你是专业设计师' ||
'仅仅想尝试下CSS Preprocessors' ||
'你的项目中CSS需求较低' ||
'你根本不懂CSS')
return 'try it';
Less的设计目标是成为CSS的超集,语法向下兼容,一言以蔽之,less不做多余的事
来自ruby context的CSS强劲绞肉机 —— by 我自己
if ('你的前端工程量级很大' ||
'你的CSS代码过度复杂难以维护' ||
'你想要最多的社区支持' ||
'你想要使用更多CSS3新特性')
return 'try it';
if ('你使用rails或其它ruby webMVC框架')
return 'enjoy it';
Sass:Ruby-like语法
Scss:CSS-like语法(Sassy CSS)
Compass Author
此二人均不熟
简洁到极致却不失任何功能的CSS高速手术刀 —— by 我自己
if ('你是使用coffeeScript的异端' ||
'你是jade的拥趸' ||
'你是TJ Holowaychuk的脑残粉' ||
'你觉得ruby大法好' ||
'你讨厌花括号和一切多余的字符' ||
'你是我的好朋友')
return 'You must use it';
Jade,
Stylus,
Nib,
Component,
Express,
Koa,
Mocha,
Node-Canvas,
EJS,
Co,
Cluster,
Should.js,
Rework,
N,
Superagent,
Git-Extras,
Commander.js
...
Creator of the Luna programming language
此人是神
来自未来的CSS --harmony —— by 我自己
if ('你是FE Developer' ||
'你想尝试CSS4的spec' ||
'你就是想玩玩')
return 'try it';
Analytics.js
TJ的同事
$ git clone git@github.com:abruzzihraig/CSS-Preprocessors-Comparison.git
$ git branch
$ git checkout <feature comparison>
$ git clone git@github.com:abruzzihraig/Ti.git
$ npm install ti-cli -g
$ npm install ti -g
$ git clone git@github.com:abruzzihraig/Ti-cli.git
$ git clone git@github.com:abruzzihraig/rework-color-distinguish.git
$ npm install rework-color-distinguish