css-doodle 是一个基于 Web-Component 的库。允许我们通过其内部的规则（纯 CSS）生成一个 div 网格，可以使用 CSS 轻松操作这些单元格，以生成图形模式或动画图形。
使用
css-doodle 的语法基于 CSS，并提供了一些额外的实用功能和速记属性。
配置
属性
| 属性名 | 说明 | 默认值 | 举例 |
|---|---|---|---|
| grid | 用来定义网格，如果是number，指定 n x n 网格； 如果是字符串 columns x rows，则指定 c x r 网格； 如果不设置或设置为0，默认 1 x 1。允许 x左右有空格 | 1 x 1 | grid="5 x 9" grid="5" |
| use | 引用 CSS custom properties (CSS variables) 定义的规则. | - | use="var(--rule)" |
| seed | 指定随机数种子，如果指定，能够得到相同的随机数值；若不指定，默认随机生成随机数，可以通过JS API获取生成的值。如果想每次渲染图案一样可以指定 | - | seed="2020" |
注释：
- x 为小写字母x
- grid 属性 与 样式属性 @grid 作用相同，@grid 优先级更高
- 可以指定grid-row-gap 或者 grid-column-gap 或者缩写 grid-gap 指定网格间距
- use 属性 与 样式属性 @use 作用相同，@use 优先级更高
- seed 属性 与 样式属性 @seed 作用相同，@seed 优先级更高
- X x Y 表示 X 列，Y 行，grid按 xy坐标轴 定义网格。
选择器
| 选择器 | 说明 | 举例 |
|---|---|---|
| :doodle | 是一个特殊的选择器，指示doodle组件元素本身。样式会被外部的普通 CSS 文件覆盖 | :doodle { --s: 1; @grid: 5 x 5 / 8em; } |
| :container | 是包含所有单元格的容器元素，继承:doodle中所有grid相关属性，可定义单元格间距，整体旋转等 | :cotainer { grid-gap: 1px; } |
| @nth(n, ...) | 选择单元格，同 :nth-child(n)，多个参数值逗号分隔 | @nth(4) {...} @nth(1, 3, 2n + 2) {...} |
| @even | 选择偶数位置单元格，同 :nth-child(even) | @even {...} |
| @odd | 选择奇数位置单元格，同 :nth-child(odd) | @odd {...} |
| @at(col, row) | 选择指定(c,r)位置单元格 | @at(4, 2) {...} |
| @random([seed]) | 随机选择单元格，可指定随机数种子数值(0-1)，未指定默认0.5。选择器可以同时使用多次 | @random(0.2) {...} |
| @row(n,...) | 选择整行单元格，多行用逗号分隔。支持 odd 和 even | @row(2) {...} @row(2,3,4) {...} @row(odd) {...} |
| @col(n,...) | 选择整列单元格，多行用逗号分隔。支持 odd 和 even | @col(2) {...} @col(2,3,4) {...} @col(odd) {...} |
| @match(expression) | 指定逻辑运算表达式expression定位单元格。变量 i, I, x, X, y和Y可以不使用前缀@符号进行计算。 | @match(i <= 8 || i >= 18) {...} @match(x ≤ y) {...} @match(tan.cos.sin(x*y) > 1) {...} |
注释：
- 写在
css-doodle下对单元格生效的样式规则 - 如果
:doodle选择器没有其他规则，可以不写
样式属性
| 属性名 | 说明 | 举例 |
|---|---|---|
| @grid | 这是定义grid值的另一种方式，它具有更高的优先级。支持设置 grid 同时 设置 size，如 5 x 5 / 100px，用 / 分隔。 | @grid: 5; @grid: 4 x 4 / 100px; @grid: 4 x 4 / 100px 200px |
| @use | 类似 use 可以引用部分样式，多个引用可以使用逗号分隔，可以声明使用 | @use: var(--rule-a), var(--rule-b); @use: var(--rule-a); @use: var(--rule-b); |
| @size | 指定宽度、高度，如果只配置一个值，默认同时指定宽高 | @size: 8em; @size: 8em 6em; |
| @offset | 指定单元个偏离 | @offset: 0 top; @offset: center; @offset: right 25%; @offset: .8em calc(100% - .8em); |
| @shape | 改变单元格形状，可以配置 clip-path 属性裁剪图案获得更多图形 | @shape: circle; @shape: hypocycloid 4; |
注释：
- shape 值：
- clip-path 裁剪图案
/* Keyword values */
clip-path: none;
/* <clip-source> values */
clip-path: url(resources.svg#c1);
/* <geometry-box> values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
/* <basic-shape> values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
内置函数
| 函数名 | 说明 | 举例 |
|---|---|---|
| @index / @i | 返回单元格的索引值，从1开始计数 | :after { content: @index;color: #fff; } |
| @row / @y | 返回单元格所在行数，从1开始计数 | :after { content: @row;color: #fff; } |
| @col / @x | 返回单元格所在列数，从1开始计数 | :after { content: @col;color: #fff; } |
| @size-row / @Y | 返回最大行数，从1开始计数 | :after { content: @row / @size-row; } |
| @size-col / @X | 返回最大列数，从1开始计数 | :after { content: @row / @size-col; } |
| @size / @I | 返回单元格总数 | :after { content: @i / @size; } |
| @pick(v1, v2,...) / @p(v1, v2, ...) | 从给定的参数列表中随机选择一个值，支持[0-9a-z] | opacity: @pick(1, .6, .4, .1); // 随机给出 |
| @pick-n(v1, v2,...) / @pn(v1, v2,...) | 从给定的参数列表从左到右按顺序一个一个返回，当最后一个参数返回后继续从第一参数开始返回（循环），返回的第一个值从第一个参数开始 | opacity: @pick-n(1, .6, .3, .1); // 1 .6 .3 .1 1 .6 .3 .1 1 ... |
| @pick-d(v1, v2,...) / @pd(v1, v2,...) | 同 @pick-n 取值规则，但是返回的第一个值是随机位置返回 | opacity: @pick-d(1, .6, .3, .1); // .3 .1 1 .6 .3 .1 1 ... |
| @rand(start [,end]) / @r(start [,end]) | 从给定的范围随机返回一个值，若未指定第二参数，则返回 [0, start] 范围 | background: rgba(96, 86, 158, @rand(.1, .9)); transition: .2s ease @rand(200ms); |
| @last-pick / @lp | 返回最靠近（@last-pick规则前面）的 @pick， @pick-n， @pick-d，@rand 返回的值 | background: linear-gradient(@pick-d(45deg, -45deg), @pick(#60569e, #e6437d), rgba(255, 255, 255, 0), @last-pick(), @pick-n(#60569e, #e6437d)); // 返回 @pick 的值 |
| @last-rand / @lr | 返回最靠近（@last-pick规则前面）的 @pick， @pick-n， @pick-d，@rand 返回的值 | |
| @repeat(times, value) / @rep(times, value) | 返回指定value值重复times次得到的值 | background: #@repeat(6, @pick([0-9a-f])); |
| @multiple(times, value) / @m / @M | 同 @repeat ，重复指定value值 times 次，用逗号分隔，@M 使用空格分隔。可以使用 @m[n]，n 将作为第一参数，如 @m5(value) | @m(3, (@pick-n(#60569e, #e6437d, #ebbf4d) calc(@n(-1) * 100% / 3), @lp calc(@n * 100% / 3))) |
| @n, @nx, @ny, @N | 仅用于 @repeat 和 @multiple 函数，获取当前重复次数。@n 表示当前重复次数；@nx 表示column重复次数；@ny表示row重复次数；@N 表示最大重复次数 | @m20(@p(#60569e, #ebbf4d) calc(@n(-1) * 100% / @N), @lp calc(@n * 100% / @N)) |
| @stripe(color [size], ...) | 绘制条纹渐变 | background: linear-gradient(@rand(360deg), @stripe(#60569e, #e6437d, #ebbf4d)); background: conic-gradient(@stripe(#60569e 10%, #e6437d 20%, #ebbf4d 30%, #321f35)); |
| @svg(svg) | 使用svg作为背景图片，可传入svg标签定义或者用css样式规则 | background-image: @svg(<svg viewBox="0 0 100 175"> @M50(<path stroke-width="@r.5" stroke="@p(#60569e, #e6437d)" d="M0 0 L@r100 @r175" />)</svg>); |
| @svg-filter(filter) | 使用svg滤镜 | |
| @<Math> | 调用数学函数，允许使用 π | @abs(@abs(@row - 3) + @abs(@col - 3) - 5) / 5 |
| @calc(expr) | 计算表达式 | content: @calc(@i * @i); |
| @var(expr) | 同 var()，避免当变量与var同时定义，浏览器无法识别 | --bg: #567483; background-color: @var(--bg); |
| @hex(num) | 转十六进制 | content: @hex(@rand(9632, 9687)); |
| @doodle(code) | 生成 url() 引用的图片资源 | |
| @shaders(code) | 生成 url() 引用的图片资源，使用 GLSL 编码 | |
| @shape(commands) | 生成 polygon() 图案给 clip-path 使用，如果指定points足够大，会形成圆 | clip-path: @shape(points: 6;); |
| @plot(commands) | 生成两个百分比值并用空格分隔。语法与@shape相同 |
注释：
- 如果函数不需要参数，可以不带
()，例如@index同@index() - 单元格计数均可用于
calc()函数，例如calc(@row * @col / @size) - 指定
seed则@rand、@pick-d返回相同随机数 - 可以使用
@m[n]，n 将作为第一参数，如@m5(value) - @M 使用空格分隔value，@multiple/@m 使用逗号分隔
@n(-1)等价于@n - 1- 更多 stripe function in css-doodle.
- commands 支持：@shape、@plot
- 表达式支持：算术符号、数学函数
js API
| api | 说明 | 举例 |
|---|---|---|
| grid | 设置css-doodle的 grid 属性 | const doodle = document.querySelector('css-doodle'); doodle.grid = "5"; |
| use | 设置css-doodle的 use 属性 | const doodle = document.querySelector('css-doodle'); doodle.use = 'var(--my-rule)'; |
| seed | 设置css-doodle的 seed 属性 | const doodle = document.querySelector('css-doodle'); doodle.seed = 'my random seed'; |
| update(style) | css-doodle重新渲染，允许传入新的样式规则 | const doodle = document.querySelector('css-doodle'); doodle.update(`@grid: 6 / 8em;background: rebeccapurple;margin: .5px;`); doodle.update(); |
| export([options]) | css-doodle 导出为一张图片，函数返回Promise对象带有图片信息 | let result = await doodle.export({scale: 6,download: true}); |
注释：
- export options配置字段：
scale: Integer导出图片比例，默认1detail: Boolean是否返回图片信息，默认falsedownload: Boolean是否下载图片，默认falsename: String下载图片图片名称，默认下载当前时间戳
实例
查看传送门
