前言
css-doodle 是一个允许开发者通过 CSS 创造图形艺术和生成艺术的工具，它扩展了 CSS 的功能，提供了一系列新的选择器和属性，以及函数来简化复杂图形的创建过程。今日前端早读课文章由 @袁川授权分享。
正文从这开始～～
css-doodle 是我多年前开始的一个项目。最初，它用于绘制一些简单的图形图案，但随着时间的推移，它演变成为一种创意编码和生成艺术的工具。我一直想写一篇关于 css-doodle 的文章，今天我终于有机会对其进行介绍。
那么，css-doodle 是如何开始的？
有一天，我在 Dribbble 上偶然发现了一个产品设计师 Jan-Paul Koudstaal 设计的背景图案，我被它的色彩和简约风格所吸引，觉得用 CSS 重新绘制这个图案可能会是一个有趣的练习。
我确信很多人都有过和我一样的经历 —— 看到一个图形形状，然后想知道是否可以用 CSS 制作。
我最初想到的解决方案是使用具有不同背景颜色和边框半径值的元素网格。问题是手动创建并为每个元素分配值可能会相当繁琐。虽然有预处理器帮助我生成 HTML 代码，但仍需要大量的代码。
在 CSS 中，通常有多种方法可以实现同一件事。例如，这个图案中的四分之一圆也可以使用 clip-path 或 radial-gradient 制作。我所希望的是专注这些关键属性。
为了更高效地探索 CSS 属性，我使用 JavaScript 生成网格并设置所有随机变量。这是在 css-doodle 之前的 Web 组件项目，用于生成代码。
css-doodle 的设计理念源自于那个早期的项目。主要的区别在于，它直接使用 CSS 而不是 JavaScript 来描述样式。以下是使用 css-doodle 代码创建相同图案的示例：
首先，我们生成一个 6x5 网格，容器宽度为 37vw ，淡色背景。接下来，对于每个单元格，我使用 @p() 函数从给定的颜色列表中随机选择一种颜色。然后以同样的方式从另一个使用 @cycle() 函数生成的列表中随机选择 border-radius 值。
另一种创建这种模式的方法是使用 clip-path 和原生的 circle () 函数。
或者使用 radial-gradient.
使用 radial-graident 创建圆形形状，然后将圆形放置在四个不同的位置。
正如您所见，css-doodle 的语法与 CSS 非常相似，只是增加了一些额外的功能。
css-doodle 并不像 SASS 或其他任何预处理器那样具有 CSS 解析器。它不解释颜色或渐变的语法，而是采取了不同的方法。
其中一个原因是，我自己无法跟上 CSS 的更新。CSS 不断添加新的特性，如单位和颜色函数，需要时间来同步更新。
这证明是一个正确的决定，因为我可以随时使用最新的 CSS 功能，而无需升级 css-doodle。
一个典型的 CSS 规则包含三个不同的部分：选择器、属性和值。
css-doodle 旨在在这三个方面扩展 CSS。它不会改变任何东西，只是包含了一些新的选择器和属性，这些选择器和属性以符号 @开头，以便将其与原生选择器和属性区分开来。
有一个例子 —— 一个网格，其中 @i 表示当前单元格的索引值。将值设置为 @content 插入值作为文本节点，我经常用它来进行调试。
选择器 @odd 仅将其块中的规则应用于奇数索引的单元格，因此只有奇数索引的单元格具有黑色背景。
你还可以为特定单元格设置背景颜色，CSS 的层叠规则将按预期应用。
单元格所附带的变量对于做出差异化更改非常有用。在这种情况下，我根据索引值为每个单元格赋予不同的大小和旋转。
@i 是一个变量，也是一个函数。我不仅可以使用 calc()，还可以将表达式放入函数参数中，直接通过 @i 进行计算。
让我们探讨一下函数的语法。
如果函数没有参数或参数，可以省略括号。这里的第一和第二实际上是相同的。
如果参数的开头或结尾有一个操作符，它将尝试对自身和返回的函数值进行计算。
这是另一个与前三个函数相等的功能。
如果第一个参数是一个数字，那么可以将函数名和这个数字组合在一起形成另一个函数，这在函数式编程中类似于 “柯里化”。
可以使用点号将多个函数连接起来，这种做法称为函数组合。每个函数的输出将成为前一个函数的输入。
下面是一个通过四次调用 @r 函数实现随机分布的例子。
随机函数在生成艺术中扮演着重要角色。在 css-doodle 中，有两类随机函数。
第一组是挑选，从给定的列表中挑选一个值。名字灵感来源于 Logo 编程语言。
共有五个单元格，每个单元格将从 1 到 5 中选择一个值。选择函数也支持类似于正则表达式的简写输入，以节省一些字符。大写 @P 将随机选择一个值，但确保下一个值与上一个值不同。在某些场景中，如选择颜色，这可能是有用的。
css-doodle 可以用作学习 CSS 属性的工具。它很容易设置网格并对不同的值进行比较。
另一个组是随机值生成， @r 和 @R（或 @rn ）。
小写 @r 用于从给定的范围内获取一个随机值，默认值为 0 到 1.
@R 是用于通过 Perlin 噪声获取随机值。
在 P5.js 中，你需要使用 noise() 和 map 函数一起，而在 css-doodle 中， @R() 函数将在一个地方完成这两个动作。获取到噪声值后，它会根据上下文将值映射到给定的范围内。
下面是一个使用噪声函数 @R 的例子：
默认情况下，css-doodle 会使用当前时间戳作为随机种子。如果您忘记设置随机种子，但又希望保留当前结果，始终可以使用开发者工具或 JavaScript 从 css-doodle 元素中 Math.random() 函数的种子值。
还有其他类型的生成函数。我称它们为生成器函数。
这些函数会生成值或将输入转换为其他形式，例如重复或反转一个列表。它们通常与挑选组函数（如 @p() ）一起使用。
最常使用的函数是 @m() 函数。它接受两个参数，第一个是迭代次数，第二个是要生成的值。
在 CSS 中，如 background-image 、 box-shadow 这样的属性接受多个值，这些值之间由逗号分隔。因此， @m() 函数会自动用逗号将这些值连接起来。
@m() 函数类似于 for 循环，但以声明式的方式进行。
有时候，我不希望 CSS 采用 for 循环，只是为了模仿其他编程语言。当然，可以使用其他方式实现相同的效果，比如 @m() 。我们需要在声明式语法中探索更多的可能性。
接下来是背景函数。
我尝试了许多生成图像的 CSS 功能，并将其应用于页面背景。CSS 绘制 API 也使用背景功能。看来 CSS 背景是一个扩展 CSS 能力的理想之地。
对我来说，CSS 背景就像一面镜子或一块数字屏幕，里面的一切元素都是虚拟的，无法触摸，因为里面没有实际的 DOM 元素。但它为我们提供了一个想象的空间，并为我们连接其他元素搭建了一座桥梁。
使用 @doodle 函数，我可以利用 css-doodle 的规则生成背景图像。CSS 本身无法创建新元素，但我可以在背景中打开另一个维度。再也不需要使用渐变技巧了。
它们甚至可以嵌套。
我添加了一个 @shaders() 函数，以使着色器编程更加直观。我并没有经常使用它。着色器函数和移除的 canvas() 函数的级别较低，这意味着需要编写大量代码才能绘制一些内容。
我更倾向于使用 @pattern() 函数。它是基于着色器构建的，语法设计类似于 CSS。它的层次更高，且具有单一功能。也许我应该构建更多这样的函数。
浏览器原生支持 SVG 作为 CSS 背景，因此我简化了 SVG 的语法，使其更像 CSS 的写法，这促使我更多地使用 SVG。
如果你对这个想法感兴趣，这里有一篇关于这个语法的详细博客文章：https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg
最后一部分是关于形状的。我会快速浏览一下。
这些是 CSS-Doodle 中的内置形状，使用 clip-path 生成。
要将一个元素转换为特定形状，可以使用 @shape 属性进行声明。另一种选择是使用 @shape() 函数。
@shape() 函数也是一种生成器，它提供了一系列命令来使用数学函数定义自定义形状。
简单的规则可以创造出各种各样的图案。以这种方式发现一些新的形状非常有趣。
这里有 playground 和一篇博客文章探讨更多的形状。
playground：https://css-doodle.com/shapes/
博文：https://yuanchuan.dev/polygon-shapes
这是我最喜欢的其中一幅作品。它展示了负空间的力量。
这段视频提到了负空间，并谈到了设置限制的重要性，这让我想起了 CSS 绘图工具，特别是它对性能的考虑以及 CSS 网格的局限性。
视频：https://vimeo.com/45232468
创造出视觉上吸引人的图形设计或艺术作品并不需要太多元素。关键是要以不同的方式看待事物。我强烈推荐观看这段视频。它真的很美。
这里是该项目的网站以及一些使用 css-doodle 的 CodePen 示例集。文档尚未完善，我仍需继续完善。
CodePen：https://codepen.io/collection/XyVkpQ
我希望您能喜欢这个 css-doodle 的介绍。谢谢！
css-doodle Github：https://github.com/css-doodle/css-doodle
关于本文
作者：@袁川
原文：https://yuanchuan.dev/an-introduction-to-css-doodle
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。
