StylusCSS获取、安装、特性、基本使用方法

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

Stylus获取、安装

Stylus安装如下，先去nodejs官方下载页面下载安装nodejs，支持window系统，直接双击安装。然后，安装stylus包，如下代码：

$ npm install stylus

然后，就会自动下载安装最新的stylus库。

关于stylus更多信息（如文档以及使用示例打包下载-英文）可以去GitHub查看。

Stylus的特征

• 冒号可选


• 分号可选


• 逗号可选


• 括号可选


• 变量


• 插值


• 混合书写


• 算术


• 强制类型转换


• 动态导入


• 条件


• 迭代


• 嵌套选择


• 父级参考


• 变量函数调用


• 词法作用域


• 内置函数(>25)


• 内部语言函数


• 压缩可选


• 图像内联可选


• 可执行Stylus


• 健壮的错误报告


• 单行和多行注释


• CSS字面量


• 字符转义


• TextMate捆绑


• 以及其他更多