From cebaabf1ed670e616a79d7c5c68ccd6cdafeebec Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Thu, 20 Oct 2022 09:53:19 +0000 Subject: [PATCH] feat: add `stylus.md` cheatsheet. 7edba8e207a4602c21200a9ae60cd79e1e348ade --- docs/lessjs.html | 3 +- docs/stylus.html | 414 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 4 + 3 files changed, 420 insertions(+), 1 deletion(-) create mode 100644 docs/stylus.html diff --git a/docs/lessjs.html b/docs/lessjs.html index a814ce83..a74677de 100644 --- a/docs/lessjs.html +++ b/docs/lessjs.html @@ -36,7 +36,7 @@ }

Less 备忘清单

-

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

+

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

入门

介绍

Less(Leaner Style Sheets 的缩写)是一门向后兼容的 CSS 扩展语言

@@ -888,6 +888,7 @@
© 2022 Kenny Wang, All rights reserved.

+ + +Stylus 备忘清单

+

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

+

入门

+

介绍

+ +

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

+ +
# 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

+

函数 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

+

另见

+ +
+ diff --git a/index.html b/index.html index 29bf43a5..7010de90 100644 --- a/index.html +++ b/index.html @@ -96,6 +96,10 @@ Styled Components + + + +Stylus