Title

Description

尝试 Stylus!

Stylus 是一种创新的样式表语言,可编译为CSS。受SASS的启发,Stylus使用node.js构建,并且能够在浏览器中运行, 正如下面这个交互式教程所示。 在上面编辑 Stylus 源码,下面可实时查看Stylus编译后的结果。

嵌套

选择器嵌套让你能保持你的 styles 个性化定制:

语法灵活

分号,冒号和大括号是可选的:

父级参考

受SASS的启发,父级参考运算符也可用:

混合

Stylus mixins allow you to define reusable functionality by defining in-language functions which can be called from within blocks:

透明混合

Transparent mixins are unique to Stylus, and are an incredibly powerful way to enhance your stylesheets. Here all the arguments passed are simply assigned to three properties. Note that parenthesis are not required, making it easy to provide cross-browser support to properties like opacity, border-radius, and even gradients.

变量

Stylus variables behave as you would expect in any other language, and may optionally be prefixed by the “$” character:

阻止属性访问

Stylus property access provides easy access to values defined within the current block. Simply prefix the name of the property with “@” to reference the value.

强大的功能丰富的语言

Stylus is not just a pre-processor, it’s a flexible and powerful language. Combined with the concept of transparent mixins you can create robust cross-browser support, or simply make your life easier with customized CSS properties as shown below:

迭代

List iteration with Stylus is simple:

插值

Interpolation combined with other powerful features allow you to mold properties and selectors all within the language itself.

操作符

Stylus supports all the operators you’ve come to expect from a language, as well as some specific to Stylus.

类型强制

Stylus performs type coercion when appropriate, and supports all of the unit types you’ve come to know and love.

sprintf运算符

The powerful “%” operator when used with strings behaves like sprintf, with each argument compiled through the stylus compiler, producing a literal value.

色彩操作

Operations against colors are especially useful. When adding or subtracting by a percentage the color lightness may be adjusted, or the hue may be adjusted with deg:

函数

Stylus functions may be defined in the same manner as mixins, however their usage differs as they return values. For example you could define a sum function as shown below:

关键字参数

Keyword arguments are also supported to make function invocation more expressive, also allowing you to disregard argument ordering.

内置函数

Stylus is packed with over 60 built-in functions for manipulating colors, checking variable types, math, list operations, and more, many of which are defined in the Stylus language itself.

颜色 BIFs

The Color built-in functions allow you adjust lightness, hue, and saturation, check if colors are light or dark and more.

结束

That’s it for now! To view the rest of the powerful features Stylus provides click “View Documentation” in the corner.

Stylus on GitHub