Cheat Sheet速查表
跳转到主要内容

Stylus 速查表

本文根据 Devhints / Stylus 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2017-10-30。

入门

CSS 语法

.box {
  color: blue;

  .button {
    color: red;
  }
}

Stylus 是一种 CSS 预处理器。

参见： stylus-lang.com

缩进语法

.box
  color: blue

  .button
    color: red

同样适用！冒号也是可选的。这通常是 Stylus 文档所采用的语法。

混合 (Mixins)

caps-type()
  text-transform: uppercase
  letter-spacing: 0.05em
h5
  caps-type()

参见 混合 (Mixins) 如下所示。

变量

royal-blue = #36a
div
  color: royal-blue

混合 (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)

混合（Mixin）有两种应用方式。

默认参数

border-radius(n = 2px)
  -webkit-border-radius: n

块级混合（Block mixins）

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

参见： 块级混合（Block mixins）

剩余参数（Rest params）

shadow(offset-x, args...)
  box-shadow: offset-x args
  margin-top: offset-x
#login
  shadow: 1px 2px 5px #eee

参见： 剩余参数（Rest params）

函数

函数

add(a, b)
  a + b
body
  padding: add(10px, 5)

参见： 函数

默认参数

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

参见： 多个返回值

值

条件赋值

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

参见： 插值

颜色运算符

#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

参见： 条件判断

For 循环

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 values）

0
null
false
''

类型检查

if val is a 'string'
if val is a 'ident'
if #fff is a 'rgba'    // → true

参见： 实例检查

内置函数

颜色函数

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)

参见： 内置函数

图像尺寸

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

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

参见： image-size

缓存

size($width)
  +cache('w' + $width)
    width: $width
.a { size: 10px }
.b { size: 10px }
// yields: .a, b { width: 10px }

首次调用时，将其内容应用于指定的选择器；若后续使用相同参数再次调用，则会通过 `@extend` 扩展首次调用时所用的选择器。

参见： cache

添加属性

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

嵌入 URL

background: embedurl('logo.png')
// → background: url("data:image/png;base64,…")

参见： embedurl

标签: cssStylus速查表