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