Stylus 备忘清单

本备忘单旨在快速理解 stylus 所涉及的主要概念，显示了它的常用方法使用清单

入门

介绍

为 Node.js 构建的富有表现力、健壮、功能丰富的 CSS 语言

• CSS 备忘清单 (jaywcjlove.github.io)
• 在线编译预览 (stylus-lang.com)

# 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

没有参数

red-border()
  border: solid 2px red

---

div
  red-border()

另见: 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

块混合

mobile()
  @media (max-width: 480px)
    {block}

---

+mobile()
  width: 10px

另见: 块混合

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)
  a + b

---

body
  padding: add(10px, 5)

另见: Functions

参数默认值

add(a, b = 2)
  a + b

另见: 参数默认值

命名参数

shadow(x, y)
  x y (y * 1.5) #000

---

.button
  box-shadow: shadow(x: 2, y: 4)

另见: 命名参数

多个返回值

sizes()
  8px 16px

---

sizes()[0]  // → 8px
sizes()[1]  // → 16px

另见: 多个返回值

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

条件赋值

royal-blue = #36a
royal-blue ?= #89f

---

div
  color: royal-blue  // #36a

?= 只会在之前未设置的情况下设置变量

另见: 条件赋值

属性查找

.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)

另见: Built-in functions

图片尺寸

返回给定图像的宽度和高度

width:  image-size('tux.png')[0]
height: image-size('tux.png')[1]

另见: image-size

缓存 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)