张鑫旭 css预处理,stylus中文文档 » 综述 » 张鑫旭-鑫空间-鑫生活

CSS需要有个巴神

下面中规中矩的CSS代码是否看得眼睛生茧了？

body {

font: 12px Helvetica, Arial, sans-serif;

}

a.button {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

如果我们让花括号卖锅

body

font: 12px Helvetica, Arial, sans-serif;

a.button

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

又或者是分号酱油

body

font: 12px Helvetica, Arial, sans-serif

a.button

-webkit-border-radius: 5px

-moz-border-radius: 5px

border-radius: 5px

冒号，你妈看你回家吃饭

body

font 12px Helvetica, Arial, sans-serif

a.button

-webkit-border-radius 5px

-moz-border-radius 5px

border-radius 5px

来点干货

border-radius()

-webkit-border-radius arguments

-moz-border-radius arguments

border-radius arguments

body

font 12px Helvetica, Arial, sans-serif

a.button

border-radius(5px)

明显的混合书写又如何？

border-radius()

-webkit-border-radius arguments

-moz-border-radius arguments

border-radius arguments

body

font 12px Helvetica, Arial, sans-serif

a.button

border-radius 5px

创建与分享

@import 'vendor'

body

font 12px Helvetica, Arial, sans-serif

a.button

border-radius 5px

甚至是语言函数

sum(nums...)

sum = 0

sum += n for n in nums

sum(1 2 3 4)

// => 10

如果所有都是可选的又将怎样？

fonts = helvetica, arial, sans-serif

body {

padding: 50px;

font: 14px/1.4 fonts;

}