feat: add stylus.md cheatsheet.

2022-10-20 17:52:33 +08:00 · 2022-10-20 17:52:33 +08:00 · 7edba8e207
commit 7edba8e207
parent efbd007801
4 changed files with 563 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -34,6 +34,7 @@ Quick Reference
 [Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
 [Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
 [Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
+[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));-->
 [HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
 [JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
 [Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
--- a/docs/lessjs.md
+++ b/docs/lessjs.md
@ -1,7 +1,7 @@
 Less 备忘清单
 ===

-本备忘单旨在快速理解 [Less](https://github.com/lerna/lerna) 所涉及的主要概念，显示了它的常用方法使用清单。
+本备忘单旨在快速理解 [Less](https://github.com/less/less.js) 所涉及的主要概念，显示了它的常用方法使用清单。

 入门
 ---
@ -715,4 +715,5 @@ each(range(4), {

 - [Less.js 官网](http://lesscss.org) _(lesscss.org)_
 - [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
+- [Stylus 备忘清单](./stylus.md) _(jaywcjlove.github.io)_
 - [在线编译预览](http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9) _(lesscss.org)_
--- 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)_
--- a/scripts/assets/stylus.svg
+++ b/scripts/assets/stylus.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 64 64">
+  <path d="M9.864 42.916c1.66-1.986 1.855-4.036.57-7.844-.814-2.4-2.165-4.264-1.172-5.76 1.058-1.595 3.304-.05 1.432 2.083l.374.26c2.246.26 3.353-2.816 1.676-3.694-4.427-2.3-8.3 2.132-6.6 7.275.732 2.18 1.758 4.492.928 6.33-.716 1.58-2.1 2.506-3.027 2.54-1.937.098-.65-4.345 1.58-5.452.195-.098.472-.228.212-.553-2.75-.3-4.362.96-5.3 2.734-2.702 5.16 5.126 7.063 9.3 2.083zM58.2 27.748c.635 1.562 1.595 3.108 1.025 4.476-.472 1.172-1.1 1.66-1.774 1.774-.96.163-.7-2.848.944-3.743.146-.08.358-.472.163-.7-2.083-.114-3.255.88-3.9 2.197-1.84 3.857 4.166 4.915 7.112 1.123 1.172-1.514 1.22-3 .098-5.73-.716-1.725-1.806-3-1.123-4.15.732-1.204 2.5-.163 1.172 1.448l.293.163c1.7.098 2.4-2.18 1.107-2.75-3.434-1.465-6.64 2.23-5.126 5.9zM36.456 23.63c-1.188-.944-4.524.635-5.468 2.978-1.188 2.978-2.946 7.324-4.67 9.228-1.823 2.002-2.002.456-1.823-.7.423-2.718 3.076-9.016 4.524-10.8-.537-.797-4.052-.684-6.494 3.108-.9 1.432-2.995 6.2-5.306 9.96-.505.814-1.14.244-.65-1.66.553-2.197 2.18-8.235 4.28-12.987 5.5-1.1 11.343-1.855 15.82-1.872.602-.163 1-.7 0-.732-3.857-.13-9.65.325-15.07 1 1.04-2.063 2.163-3.733 3.3-4.433-1.237-.78-3.743-.472-5.175 1.644-.635.944-1.27 2.083-1.872 3.32-3.97.618-7.372 1.318-9.098 1.97-1.8.684-1.595 2.848-.505 2.44 2.262-.846 5.322-1.725 8.723-2.506-2.165 4.882-3.857 10.644-4.264 12.987-1 5.696 2.523 5.664 4.248 3.418 1.872-2.457 5.777-11.1 6.38-12 .18-.3.423-.146.293.13-4.362 8.707-3.987 12.076-.456 11.327 1.595-.342 4.345-3.076 5.06-4.492.146-.342.456-.3.4-.163-2.767 7.177-6.282 12.987-8.642 14.8-2.148 1.644-3.743-1.92 3.857-7.03 1.123-.765.602-1.806-.667-1.448-3.922.618-15.152 4.183-20.083 7.6-.374.26-.716.472-.7 1 .016.3.553.195.814.033 6.38-3.825 11.604-5.322 17.593-6.575.08.033.18.05.26.016.277-.065.26.08.08.195-.407.228-.814.44-.9.472-4.036 1.58-6.477 5.06-5.615 6.835.732 1.53 4.687.976 6.56-.033 4.6-2.5 7.926-7.372 10.204-14.1 1.986-5.973 4.492-12.743 5.078-12.938zM63.13 37.415c-7.47-.976-23.582.325-30.694 2.213-2.116.553-1.53 1.676-.456 1.465.016 0 .472-.114.488-.114 5.843-1.14 20.018-2.132 28.285-.553.993.18 3.97-2.8 2.376-3zm-24.6-.88c2.083-1.042 5.175-7.486 7.2-11.018.146-.26.407-.05.26.13-5.143 8.853-2.962 9.88-.928 9.748 2.718-.163 5.224-4.07 5.777-4.947.228-.342.358-.065.228.18-.13.407-.602 1.123-1.042 2.1-.618 1.383.033 1.92.57 2.165.846.407 3.157.146 3.515-1.27-2.3-.05 3.222-10.953 3.792-11.62-1.546-.895-3.938.08-5.03 2.23-2.327 4.606-4.28 8.316-5.5 8.38-2.376.13 2.734-10.27 3.564-10.595-.505-.732-3.743-.423-5.55 2.376-.65 1-4.622 8.04-5.598 9.195-1.725 2.05-1.855.293-1.367-1.758.163-.7.44-1.595.797-2.588 1.14-2.57 2.36-3.385 3.108-4.215 5.03-5.582 7.9-10.107 6.77-11.88-1-1.58-4.378-.88-6.542 2.376-3.987 5.973-7.665 14.16-8.137 17.902-.456 3.743 2.262 4.02 4.1 3.108zm2.116-10.953c.18-.407.293-.52.602-1.204 1.8-3.938 4.036-8.088 5.582-10.025.96-1 2.3.358-.13 4.1a37.625 37.625 0 0 1-4.834 6.038c-.456.52-.863.944-1.042 1.188-.13.163-.277.13-.18-.098z"/>
+</svg>