选择器(Selectors)
缩进
变量(Variables)
我们可以将表达式赋值给变量,并在整个样式表中使用它们:
插值(Interpolation)
Stylus 支持插值,使用 {} 字符来包围表达式,这样表达式就成为标识符的一部分。例如,-webkit-{'border' + '-radius'} 的计算结果为 -webkit-border-radius。
运算符(Operators)
运算符优先级
混合(Mixins)
混合器和函数的定义方式相同,但它们的应用方式不同。
函数(Functions)
Stylus 具有强大的语言内函数定义功能。函数定义与 mixin 完全相同;但是,函数可以返回一个值。
关键字参数(Keyword)
Stylus 支持关键字参数,或称为“kwargs”。这允许您通过它们关联的参数名称引用参数。
内置函数(bifs)
颜色函数
Rest Params
Stylus 支持以 name... 形式的剩余参数。这些参数会消耗传递给 mixin 或函数的剩余参数。当使用(例如)隐式函数调用支持来应用供应商前缀(如 -webkit 或 -moz)时,这非常有用。
注释(Comments)
Stylus 支持三种注释:单行注释、多行注释和多行缓冲注释。
条件语句(Conditionals)
条件语句为一种静态语言提供了控制流,提供了条件导入、混合、函数等。下面的示例仅仅是示例,不建议使用 :)
哈希(Hashes)
在 0.39.0 版本中,Stylus 引入了哈希对象。
迭代(iteration)
Stylus 允许您通过 for/in 结构迭代表达式,形式如下:
url()
数据 URI 图像内联
CSS Literal
如果由于任何原因 Stylus 无法满足特定需求,您可以始终使用 @css 进行字面量 CSS:
CSS 样式语法
Stylus 透明地支持常规的 CSS 样式语法。这意味着您不需要替代解析器,也不需要指定某个文件使用特定的样式。
字符转义(Escape)
Stylus 允许您转义字符。这有效地将它们转换为标识符,使它们可以呈现为文字。
使用 Stylus 进行样式设计
安装 Stylus 非常简单,只需先安装 Node.js,然后获取适用于您平台的二进制文件,并确保它们也包括 npm,Node 的包管理器。
Connect 中间件
Stylus 随附了 Connect 中间件,用于在修改时自动编译 Stylus 样式表。
JavaScript API
简单地使用 require 模块,并使用给定的 Stylus 代码字符串和(可选的)options 对象调用 render()。