feat: add stylus.md cheatsheet.

2025-06-16 12:11:21 +08:00 · 2022-10-20 17:52:33 +08:00
parent efbd007801
commit 7edba8e207
4 changed files with 563 additions and 1 deletions
--- a/docs/stylus.md
+++ b/docs/stylus.md
@ -0,0 +1,557 @@
+Stylus 备忘清单
+===
+
+本备忘单旨在快速理解 [stylus](https://github.com/stylus/stylus) 所涉及的主要概念，显示了它的常用方法使用清单。
+
+入门
+---
+
+### 介绍
+<!--rehype:wrap-class=row-span-2-->
+
+为 Node.js 构建的富有表现力、健壮、功能丰富的 [CSS](./css.md) 语言
+
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [在线编译预览](https://stylus-lang.com/try.html) _(stylus-lang.com)_
+
+```bash
+# npm
+$ npm install stylus -g
+# pnpm
+$ pnpm add -g stylus
+```
+
+在 Node.js 环境中使用 `stylus`
+
+```bash
+$ 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 嵌套语法
+
+```stylus
+.box {
+  color: blue;
+  .button {
+    color: red;
+  }
+}
+```
+
+Stylus 是一个 CSS 预处理器。另见: [stylus-lang.com](http://stylus-lang.com/)
+
+### 支持类 python 缩进语法
+
+```stylus
+.box
+  color: blue
+  .button
+    color: red
+```
+
+也有效！冒号也是可选的。这通常用于 Stylus 文档的语法
+
+### 混合 Mixins
+
+```stylus
+caps-type()
+  letter-spacing: 0.05em
+```
+
+----
+
+```stylus {2}
+h5
+  caps-type()
+```
+
+编译 css 为：
+
+```css
+h5 {
+  letter-spacing: 0.05em;
+}
+```
+
+另见：下面[Mixins](#混合-Mixins)
+
+### 变量 Variables
+
+```stylus
+royal-blue = #36a
+```
+
+----
+
+```stylus
+div
+  color: royal-blue
+```
+
+标识符（变量名、函数等）也可以包括 `$` 字符
+
+```stylus
+$font-size = 14px
+body {
+  font: $font-size sans-serif;
+}
+```
+
+另见：[变量 Variables](https://stylus-lang.com/docs/variables.html)
+
+混合 Mixins
+------
+
+### 没有参数
+
+```stylus {1}
+red-border()
+  border: solid 2px red
+```
+
+----
+
+```stylus {2}
+div
+  red-border()
+```
+
+另见: [Mixins](http://stylus-lang.com/docs/mixins.html)
+
+### 有参数
+
+```stylus {1}
+border-radius(n)
+  -webkit-border-radius: n
+  border-radius: n
+```
+
+----
+
+```stylus {2,3}
+div
+  border-radius: 2px
+  border-radius(2px)
+```
+
+Mixins can be applied in two different ways.
+
+### 参数默认值
+
+```stylus {1}
+border-radius(n = 2px)
+  -webkit-border-radius: n
+```
+
+### 块混合
+
+```stylus {3}
+mobile()
+  @media (max-width: 480px)
+    {block}
+```
+
+----
+
+```stylus {1}
+mobile()
+  width: 10px
+```
+
+另见: [块混合](http://stylus-lang.com/docs/mixins.html#block-mixins)
+
+### Rest 参数
+
+```stylus {1}
+shadow(offset-x, args...)
+  box-shadow: offset-x args
+  margin-top: offset-x
+```
+
+----
+
+```stylus
+#login
+  shadow: 1px 2px 5px #eee
+```
+
+另见: [Rest 参数](http://stylus-lang.com/docs/vargs.html)
+
+函数 Functions
+---------
+
+### 函数 Functions
+
+```stylus {1}
+add(a, b)
+  a + b
+```
+
+----
+
+```stylus {2}
+body
+  padding: add(10px, 5)
+```
+
+另见: [Functions](http://stylus-lang.com/docs/functions.html)
+
+### 参数默认值
+
+```stylus {1}
+add(a, b = 2)
+  a + b
+```
+
+另见: [参数默认值](http://stylus-lang.com/docs/functions.html#argument-defaults)
+
+### 命名参数
+
+```stylus
+shadow(x, y)
+  x y (y * 1.5) #000
+```
+
+----
+
+```stylus {2}
+.button
+  box-shadow: shadow(x: 2, y: 4)
+```
+
+另见: [命名参数](http://stylus-lang.com/docs/functions.html#named-parameters)
+
+### 多个返回值
+
+```stylus {2}
+sizes()
+  8px 16px
+```
+
+----
+
+```stylus
+sizes()[0]  // → 8px
+sizes()[1]  // → 16px
+```
+
+另见: [多个返回值](http://stylus-lang.com/docs/functions.html#multiple-return-values)
+
+### arguments
+
+```stylus
+sum()
+  n = 0
+  for num in arguments
+    n = n + num
+```
+
+----
+
+```stylus
+sum(1,2,3,4,5) // => 15
+```
+
+参数 local 可用于所有函数体，并包含所有传递的参数
+
+### hash 示例
+
+```stylus
+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
+```
+<!--rehype:className=wrap-text -->
+
+值 Values
+------
+
+### 条件赋值
+
+```stylus {2}
+royal-blue = #36a
+royal-blue ?= #89f
+```
+
+----
+
+```stylus
+div
+  color: royal-blue  // #36a
+```
+
+`?=` 只会在之前未设置的情况下设置变量
+
+另见: [条件赋值](https://stylus-lang.com/docs/operators.html#conditional-assignment--)
+
+### 属性查找
+
+```stylus {2,3}
+.logo
+  width: w = 150
+  margin-left: -(w / 2)
+  // or
+  height: 80px
+  margin-top: -(@height / 2)
+```
+
+另见: [属性查找](https://stylus-lang.com/docs/variables.html#property-lookup)
+
+### 插值
+
+```stylus
+-{prefix}-border-radius: 2px
+```
+
+另见: [Interpolation](https://stylus-lang.com/docs/interpolation.html)
+
+### Color operators
+
+```stylus
+#888 + 50%    // → #c3c3c3 (lighten)
+#888 - 50%    // → #444 (darken)
+#f00 + 50deg  // → #ffd500 (hue)
+```
+
+### Casting
+
+```stylus
+n = 5px
+```
+
+----
+
+```stylus {1,2}
+foo: (n)em
+foo: (n * 5)%
+```
+
+### Lookup
+
+```stylus {3}
+light-blue = #3bd
+name = 'blue'
+lookup('light-' + name)
+```
+
+另见: [lookup](https://stylus-lang.com/docs/bifs.html#lookupname)
+
+高级功能
+-----------------
+
+### 有条件的
+<!--rehype:wrap-class=row-span-2-->
+
+```stylus
+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](https://stylus-lang.com/docs/functions.html#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)
+```
+### 定义检查
+
+```stylus {1}
+if ohnoes is defined
+  color: blue
+```
+
+另见: [is defined](https://stylus-lang.com/docs/operators.html#variable-definition-is-defined)
+
+### False 值
+
+```stylus
+0
+null
+false
+''
+```
+
+### 类型检查
+
+```stylus
+if val is a 'string'
+if val is a 'ident'
+if #fff is a 'rgba'    // → true
+```
+
+另见: [Instance check](https://stylus-lang.com/docs/operators.html#instance-check-is-a)
+
+内置函数
+------------------
+
+### 颜色函数
+<!--rehype:wrap-class=row-span-4-->
+
+```stylus
+alpha(#fff)   //→ 1
+alpha(rgba(0, 0, 0, 0.2))   //→ 0.2
+```
+
+----
+
+```stylus
+dark(black)  //→ true
+light(black) //→ false
+```
+
+----
+
+```stylus
+hue(#0a0)         //→ 50deg
+saturation(#f00)  //→ 100%
+lightness(#f00)   //→ 50%
+luminosity(#f00)  //→ 0.2126
+```
+
+----
+
+```stylus
+hue(#0a0, 0deg)
+saturation(#f00, 50%)
+lightness(#f00)
+```
+
+----
+
+```stylus
+lighten(color, 10%)
+darken(color, 10%)
+saturate(color, 10%)
+desaturate(color, 10%)
+invert(color)
+```
+
+----
+
+```stylus
+tint(color, 50%)  // mix with white
+shade(color, 50%) // mix with black
+```
+
+----
+
+```stylus
+unquote(string)
+```
+
+另见: [Built-in functions](http://stylus-lang.com/docs/bifs.html)
+
+### 图片尺寸
+
+返回给定图像的宽度和高度
+
+```stylus
+width:  image-size('tux.png')[0]
+height: image-size('tux.png')[1]
+```
+
+另见: [image-size](http://stylus-lang.com/docs/bifs.html#image-sizepath)
+
+### 缓存 Caching
+<!--rehype:wrap-class=row-span-2-->
+
+```stylus
+size($width)
+  +cache('w' + $width)
+    width: $width
+.a { size: 10px }
+.b { size: 10px }
+```
+
+----
+
+```stylus
+// 输出: .a, b { width: 10px }
+```
+
+在第一次调用时将其内容应用于给定的选择器，但会在第二次调用时使用相同的参数 `@extend` 第一次调用的选择器。另见: [cache](http://stylus-lang.com/docs/bifs.html#cachekeys)
+
+### Embed URL
+
+```
+background: embedurl('logo.png')
+// → background: url("data:image/png;base64,…")
+```
+<!--rehype:className=wrap-text -->
+
+另见: [embedurl](http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding)
+
+### 添加属性
+
+```stylus
+gradient(color)
+  add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
+  color
+```
+
+----
+
+```stylus
+body
+  background: gradient(red)
+```
+
+另见: [add-property](http://stylus-lang.com/docs/bifs.html#add-propertyname-expr)
+
+### sprintf
+
+```stylus
+'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
+// → -webkit-gradient(linear, 0 0, 0 100%)
+```
+<!--rehype:className=wrap-text -->
+
+----
+
+```stylus
+s("rgba(0, 0, 0, %s)", 0.3)
+```
+
+另见: [s](http://stylus-lang.com/docs/bifs.html#sfmt-)
+
+另见
+---
+
+- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [在线编译预览](https://stylus-lang.com/try.html) _(stylus-lang.com)_
+- [Less.js 备忘清单](./lessjs.md) _(jaywcjlove.github.io)_