## 入门

### 介绍

为 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

    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)