Stylus 备忘清单

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

入门

介绍

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

  1. # npm
  2. $ npm install stylus -g
  3. # pnpm
  4. $ pnpm add -g stylus

在 Node.js 环境中使用 stylus

  1. $ stylus one.styl two.styl
  2. # stylus 从标准输入读取并输出到标准输出
  3. $ stylus --compress < some.styl > some.css
  4. # 将 css 目录中的文件编译输出到 `public/css`
  5. $ stylus css --out public/css

转换 CSS，输出 *.styl 文件

  1. $ stylus --css < test.css > test.styl
  2. $ stylus --css test.css /tmp/out.styl

支持 CSS 嵌套语法

  1. .box {
  2.   color: blue;
  3.   .button {
  4.     color: red;
  5.   }
  6. }

Stylus 是一个 CSS 预处理器。另见: stylus-lang.com

支持类 python 缩进语法

  1. .box
  2.   color: blue
  3.   .button
  4.     color: red

也有效！冒号也是可选的。这通常用于 Stylus 文档的语法

混合 Mixins

  1. caps-type()
  2.   letter-spacing: 0.05em

```stylus {2} h5 caps-type()

  2. 编译 css 为：
  4. ```css
  5. h5 {
  6.   letter-spacing: 0.05em;
  7. }

另见：下面Mixins

变量 Variables

  1. royal-blue = #36a
  1. div
  2.   color: royal-blue

标识符（变量名、函数等）也可以包括 $ 字符

  1. $font-size = 14px
  2. body {
  3.   font: $font-size sans-serif;
  4. }

另见：变量 Variables

混合 Mixins

没有参数

```stylus {1} red-border() border: solid 2px red

  2. ----
  4. ```stylus {2}
  5. div
  6.   red-border()

另见: Mixins

有参数

```stylus {1} border-radius(n) -webkit-border-radius: n border-radius: n

  2. ----
  4. ```stylus {2,3}
  5. div
  6.   border-radius: 2px
  7.   border-radius(2px)

Mixins can be applied in two different ways.

参数默认值

```stylus {1} border-radius(n = 2px) -webkit-border-radius: n

  2. ### 块混合
  4. ```stylus {3}
  5. mobile()
  6.   @media (max-width: 480px)
  7.     {block}

```stylus {1} +mobile() width: 10px

  2. 另见: [块混合](http://stylus-lang.com/docs/mixins.html#block-mixins)
  4. ### Rest 参数
  6. ```stylus {1}
  7. shadow(offset-x, args...)
  8.   box-shadow: offset-x args
  9.   margin-top: offset-x
  1. #login
  2.   shadow: 1px 2px 5px #eee

另见: Rest 参数

函数 Functions

函数 Functions

```stylus {1} add(a, b) a + b

  2. ----
  4. ```stylus {2}
  5. body
  6.   padding: add(10px, 5)

另见: Functions

参数默认值

```stylus {1} add(a, b = 2) a + b

  2. 另见: [参数默认值](http://stylus-lang.com/docs/functions.html#argument-defaults)
  4. ### 命名参数
  6. ```stylus
  7. shadow(x, y)
  8.   x y (y * 1.5) #000

```stylus {2} .button box-shadow: shadow(x: 2, y: 4)

  2. 另见: [命名参数](http://stylus-lang.com/docs/functions.html#named-parameters)
  4. ### 多个返回值
  6. ```stylus {2}
  7. sizes()
  8.   8px 16px
  1. sizes()[0]  // → 8px
  2. sizes()[1]  // → 16px

另见: 多个返回值

arguments

  1. sum()
  2.   n = 0
  3.   for num in arguments
  4.     n = n + num
  1. sum(1,2,3,4,5) // => 15

参数 local 可用于所有函数体，并包含所有传递的参数

hash 示例

  1. get(hash, key)
  2.   return pair[1] if pair[0] == key for pair in hash
  4. hash = (one 1) (two 2) (three 3)
  6. get(hash, two)
  7. // => 2

值 Values

条件赋值

```stylus {2} royal-blue = #36a royal-blue ?= #89f

  2. ----
  4. ```stylus
  5. div
  6.   color: royal-blue  // #36a

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

另见: 条件赋值

属性查找

```stylus {2,3} .logo width: w = 150 margin-left: -(w / 2) // or height: 80px margin-top: -(@height / 2)

  2. 另见: [属性查找](https://stylus-lang.com/docs/variables.html#property-lookup)
  4. ### 插值
  6. ```stylus
  7. -{prefix}-border-radius: 2px

另见: Interpolation

Color operators

  1. #888 + 50%    // → #c3c3c3 (lighten)
  2. #888 - 50%    // → #444 (darken)
  3. #f00 + 50deg  // → #ffd500 (hue)

Casting

  1. n = 5px

```stylus {1,2} foo: (n)em foo: (n * 5)%

  2. ### Lookup
  4. ```stylus {3}
  5. light-blue = #3bd
  6. name = 'blue'
  7. lookup('light-' + name)

另见: lookup

高级功能

有条件的

  1. if color == blue
  2.   display: block
  3. else if true and true
  4.   display: inline
  5. else if 'hey' is not 'bye'
  6.   display: flex
  7. else
  8.   display: none

别名:

:- :-
== is
!= is not
!= isnt

另见: Conditionals

对于循环

```stylus {5} 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. ### 定义检查
  3. ```stylus {1}
  4. if ohnoes is defined
  5.   color: blue

另见: is defined

False 值

  1. 0
  2. null
  3. false
  4. ''

类型检查

  1. if val is a 'string'
  2. if val is a 'ident'
  3. if #fff is a 'rgba'    // → true

另见: Instance check

内置函数

颜色函数

  1. alpha(#fff)   //→ 1
  2. alpha(rgba(0, 0, 0, 0.2))   //→ 0.2
  1. dark(black)  //→ true
  2. light(black) //→ false
  1. hue(#0a0)         //→ 50deg
  2. saturation(#f00)  //→ 100%
  3. lightness(#f00)   //→ 50%
  4. luminosity(#f00)  //→ 0.2126
  1. hue(#0a0, 0deg)
  2. saturation(#f00, 50%)
  3. lightness(#f00)
  1. lighten(color, 10%)
  2. darken(color, 10%)
  3. saturate(color, 10%)
  4. desaturate(color, 10%)
  5. invert(color)
  1. tint(color, 50%)  // mix with white
  2. shade(color, 50%) // mix with black
  1. unquote(string)

另见: Built-in functions

图片尺寸

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

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

另见: image-size

缓存 Caching

  1. size($width)
  2.   +cache('w' + $width)
  3.     width: $width
  4. .a { size: 10px }
  5. .b { size: 10px }
  1. // 输出: .a, b { width: 10px }

在第一次调用时将其内容应用于给定的选择器，但会在第二次调用时使用相同的参数 @extend 第一次调用的选择器。另见: cache

Embed URL

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

另见: embedurl

添加属性

  1. gradient(color)
  2.   add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
  3.   color
  1. body
  2.   background: gradient(red)

另见: add-property

sprintf

  1. '-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
  2. // → -webkit-gradient(linear, 0 0, 0 100%)
  1. s("rgba(0, 0, 0, %s)", 0.3)

另见: s

另见