本备忘单旨在快速理解 stylus 所涉及的主要概念，显示了它的常用方法使用清单
入门
介绍
为 Node.js 构建的富有表现力、健壮、功能丰富的 CSS 语言
1
2
3
4
|
$ npm install stylus -g
$ pnpm add -g stylus
|
在 Node.js 环境中使用 stylus
1
2
3
4
5
| $ stylus one.styl two.styl
$ stylus --compress < some.styl > some.css
$ stylus css --out public/css
|
转换 CSS，输出 *.styl 文件
1
2
| $ stylus --css < test.css > test.styl
$ stylus --css test.css /tmp/out.styl
|
支持 CSS 嵌套语法
1
2
3
4
5
6
| .box {
color: blue;
.button {
color: red;
}
}
|
Stylus 是一个 CSS 预处理器。另见: stylus-lang.com
支持类 python 缩进语法
1
2
3
4
| .box
color: blue
.button
color: red
|
也有效！冒号也是可选的。这通常用于 Stylus 文档的语法
混合 Mixins
1
2
| caps-type()
letter-spacing: 0.05em
|
{2}
编译 css 为：
1
2
3
| h5 {
letter-spacing: 0.05em;
}
|
另见：下面Mixins
变量 Variables
标识符（变量名、函数等）也可以包括 $ 字符
1
2
3
4
| $font-size = 14px
body {
font: $font-size sans-serif;
}
|
另见：变量 Variables
混合 Mixins
没有参数
{1}1
2
| red-border()
border: solid 2px red
|
{2}
另见: Mixins
有参数
{1}1
2
3
| border-radius(n)
-webkit-border-radius: n
border-radius: n
|
{2,3}1
2
3
| div
border-radius: 2px
border-radius(2px)
|
Mixins can be applied in two different ways.
参数默认值
{1}1
2
| border-radius(n = 2px)
-webkit-border-radius: n
|
块混合
{3}1
2
3
| mobile()
@media (max-width: 480px)
{block}
|
{1}
另见: 块混合
Rest 参数
{1}1
2
3
| shadow(offset-x, args...)
box-shadow: offset-x args
margin-top: offset-x
|
1
2
| #login
shadow: 1px 2px 5px #eee
|
另见: Rest 参数
函数 Functions
函数 Functions
{1}
{2}1
2
| body
padding: add(10px, 5)
|
另见: Functions
参数默认值
{1}
另见: 参数默认值
命名参数
1
2
| shadow(x, y)
x y (y * 1.5) #000
|
{2}1
2
| .button
box-shadow: shadow(x: 2, y: 4)
|
另见: 命名参数
多个返回值
{2}
另见: 多个返回值
arguments
1
2
3
4
| sum()
n = 0
for num in arguments
n = n + num
|
参数 local 可用于所有函数体，并包含所有传递的参数
hash 示例
1
2
3
4
5
6
7
| get(hash, key)
return pair[1] if pair[0] == key for pair in hash
hash = (one 1) (two 2) (three 3)
get(hash, two)
|
值 Values
条件赋值
{2}1
2
| royal-blue = #36a
royal-blue ?= #89f
|
1
2
| div
color: royal-blue // #36a
|
?= 只会在之前未设置的情况下设置变量
另见: 条件赋值
属性查找
{2,3}1
2
3
4
5
6
| .logo
width: w = 150
margin-left: -(w / 2)
height: 80px
margin-top: -(@height / 2)
|
另见: 属性查找
插值
1
| -{prefix}-border-radius: 2px
|
另见: Interpolation
Color operators
1
2
3
| #888 + 50%
#888 - 50%
#f00 + 50deg
|
Casting
{1,2}1
2
| foo: (n)em
foo: (n * 5)%
|
Lookup
{3}1
2
3
| light-blue = #3bd
name = 'blue'
lookup('light-' + name)
|
另见: lookup
高级功能
有条件的
1
2
3
4
5
6
7
8
| if color == blue
display: block
else if true and true
display: inline
else if 'hey' is not 'bye'
display: flex
else
display: none
|
别名:
| :- |
:- |
== |
is |
!= |
is not |
!= |
isnt |
另见: Conditionals
对于循环
{5}1
2
3
4
5
6
| font-size-1 = 10px
font-size-2 = 20px
font-size-3 = 30px
for i in 1..3
.text-{i}
font-size: lookup('font-size-' + i)
|
定义检查
{1}1
2
| if ohnoes is defined
color: blue
|
另见: is defined
False 值
类型检查
1
2
3
| if val is a 'string'
if val is a 'ident'
if #fff is a 'rgba'
|
另见: Instance check
内置函数
颜色函数
1
2
| alpha(#fff)
alpha(rgba(0, 0, 0, 0.2))
|
1
2
| dark(black)
light(black)
|
1
2
3
4
| hue(#0a0)
saturation(#f00)
lightness(#f00)
luminosity(#f00)
|
1
2
3
| hue(#0a0, 0deg)
saturation(#f00, 50%)
lightness(#f00)
|
1
2
3
4
5
| lighten(color, 10%)
darken(color, 10%)
saturate(color, 10%)
desaturate(color, 10%)
invert(color)
|
1
2
| tint(color, 50%)
shade(color, 50%)
|
另见: Built-in functions
图片尺寸
返回给定图像的宽度和高度
1
2
| width: image-size('tux.png')[0]
height: image-size('tux.png')[1]
|
另见: image-size
缓存 Caching
1
2
3
4
5
| size($width)
+cache('w' + $width)
width: $width
.a { size: 10px }
.b { size: 10px }
|
在第一次调用时将其内容应用于给定的选择器，但会在第二次调用时使用相同的参数 @extend 第一次调用的选择器。另见: cache
Embed URL
1
2
| background: embedurl('logo.png')
// → background: url("data:image/png;base64,…")
|
另见: embedurl
添加属性
1
2
3
| gradient(color)
add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
color
|
1
2
| body
background: gradient(red)
|
另见: add-property
sprintf
1
2
| '-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
|
1
| s("rgba(0, 0, 0, %s)", 0.3)
|
另见: s
另见
