css-doodle入门（六）

马黑黑 · 发表于 2023-4-23 07:32

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

@repeat() 和 @multiple() 函数

这两个函数都是用来多次组合指定的值。两个函数所需要的两个参数一样：

@repeat(5, 'a'); /* 运行结果 aaaaa */
@multiple(5,'a'); /* 运行结果 a,a,a,a,a */

上面的两个语句，都表示同一个意思：将字母 a 重复 5 次。不同的是重复后的结果，repeat() 函数得到的 5 个 a 连在一起写，@multiple() 得到的 5 个 a 彼此间用逗号隔开（末尾没有逗号）。

以下代码可以到页面 http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html 中运行，从中感受两个函数的工作机制和效果：

<css-doodle>
:doodle {
@grid: 1x2 / 400px 200px;
gap: 1px;
}
@row(1) {
background: silver;
:before { content: @repeat(5, @pick([a-zA-Z])); }
}
@row(2) {
background: gray;
:before { content: @multiple(5,'a'); }
}
</css-doodle>

代码中，第一、二行网格背景色分别为银白色（silver）和灰色（gray），它们通过伪元素 :before 的 content 属性将函数 @repeat() 和 @multiple() 的执行结果呈现出来。

这两个重复组合给定值的函数有什么作用呢？让我们来举例说明。

其一：生成十六进制随机颜色

比方说，我们要随机生成十六进制颜色值，@repeat() 函数就能派上用场。十六进制颜色用符号 # 做前缀，随后由 6 个 0-9 的数字和 a-f 的字母组合而成，我们结合 @pick() 函数，就能随机组合数字和字母，从而达到生成随机十六进制颜色的目的。

@pick() 函数随机在备选数组值中挑选一个元素成员，我们先试着让它挑出一个字母：

@pick([a-zA-Z]);

每一次运行，将得出大小写字母表中的任意一个。实际上，我们只需要 a-f 就可以了，所以上式可以写成：

@pick([a-f]); 或 @pick([A-F]);

我们还需要挑出 0-9 的数字，所以把数字也加入到备选成员中：

@pick([0-9a-f]); 或 @pick([0-9A-F]);

现在你可能会很迷惑：[0-9a-f] 是什么鬼？嗯，这是正则表达式，表示备选的成员分为， 0-9 表示在 0 和 9 之间、a-f 表示在 a 和 f 之间这样的范围，包含头尾即 0 和 9 、a 和 f。

不过这样选择每一次只能得到一个字母或数字，所以，@repeat() 函数就该上场了：

@repeat(6, @pick([0-9a-f]));

@repeat函数运行六次，每一次都在 [0-9a-f] 内随机挑选一个数字或字母，这样，得到的结果会是这样：

d6c2a3

我们在其前面加上前缀 # 号，是不是就是我们所预期的十六进制颜色？

下面的代码，给 8x8 的网格每一个单元格用十六进制设定不同的背景色：

<css-doodle>
:doodle {
@grid: 8 / 400px;
gap: 1px;
}
--bgcolor: #@repeat(6, @pick([0-9A-F]));
background: var(--bgcolor);
</css-doodle>

其二：生成 rgb 随即颜色

rgb() 颜色是当代浏览器默认支持的颜色表达方案，r 代表红色 red，g 代表绿色 green，b 代表蓝色 blue，三种颜色以百分比参与到颜色组合中混合出最终颜色。rgb() 需要 3 个参数，参数间用逗号隔开，css-doodle 的函数 @multiple() 正好能生成带逗号分隔的重复组合结果：

@multiple(3, @r(100)%)

上式，会生成 3 个百分比数字（浮点数百分比），两个数之间用逗号分割：18.6944321%, 20.0004554%, 89.5578944%。如此，我们用 rgb() 表示法封装一下上式，就可以得到我们所需的 rgb 随机颜色：

--bgcolor: rgb(
@multiple(3, @r(100)%)
);

上面的代码，可以写在一行里：--bgcolor: rgb( @multiple(3, @r(100)%));

最后给出一个使用 rgb() 随机颜色设定单元格背景色的 css-doodle 示例：

<css-doodle click-to-update>
:doodle { @grid: 8 / 600px; gap: 1px; }
--bgcolor: rgb(@multiple(3, @r(100)%));
background: var(--bgcolor);
</css-doodle>