css-doodle入门（六）
@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()); }
}
@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-f 就可以了，所以上式可以写成：
@pick(); 或 @pick();
我们还需要挑出 0-9 的数字，所以把数字也加入到备选成员中：
@pick(); 或 @pick();
现在你可能会很迷惑： 是什么鬼？嗯，这是正则表达式，表示备选的成员分为， 0-9 表示在 0 和 9 之间、a-f 表示在 a 和 f 之间这样的范围，包含头尾即 0 和 9 、a 和 f。
不过这样选择每一次只能得到一个字母或数字，所以，@repeat() 函数就该上场了：
@repeat(6, @pick());
@repeat函数运行六次，每一次都在 内随机挑选一个数字或字母，这样，得到的结果会是这样：
d6c2a3
我们在其前面加上前缀 # 号，是不是就是我们所预期的十六进制颜色？
下面的代码，给 8x8 的网格每一个单元格用十六进制设定不同的背景色：
<css-doodle>
:doodle {
@grid: 8 / 400px;
gap: 1px;
}
--bgcolor: #@repeat(6, @pick());
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>
rgb()这个一下子没反应过来，习惯了是从0到255的，原来也可以百分比表示啊。把100%理解成了是0-1{:4_173:} 红影 发表于 2023-4-23 09:03
rgb()这个一下子没反应过来，习惯了是从0到255的，原来也可以百分比表示啊。把100%理解成了是0-1
你用传统表达法也是可以的：
--bgcolor: rgb(@multiple(3, @r(255))); 马黑黑 发表于 2023-4-23 09:11
你用传统表达法也是可以的：
--bgcolor: rgb(@multiple(3, @r(255)));
嗯嗯，这样就明白了。谢谢黑黑{:4_204:}
关于@rand其实也没学透，它是随机返回两个数字之间的一个值。如果只有一个数，就还是指0到这个数吧。那么是否包含端头的数值，也就是@r(255)包含255本身么？ 本帖最后由 马黑黑 于 2023-4-23 09:49 编辑
红影 发表于 2023-4-23 09:38
嗯嗯，这样就明白了。谢谢黑黑
关于@rand其实也没学透，它是随机返回两个数字之间的一个值。 ...
这个，@rand()，只有一个参数的情形，我在教程里解释过的；两个参数的头尾问题，包含，极低概率。 马黑黑 发表于 2023-4-23 09:47
这个，@rand()，只有一个参数的情形，我在教程里解释过的；两个参数的头尾问题，包含，极低概率。
去翻了一下，入门（五）里面讲过的，所以说我没学好{:4_173:} 红影 发表于 2023-4-23 10:49
去翻了一下，入门（五）里面讲过的，所以说我没学好
心浮气躁，急于求成，是很多人都有的特点 马黑黑 发表于 2023-4-23 11:03
心浮气躁，急于求成，是很多人都有的特点
这个倒也不是，只是内容多啊，看一遍怎么可能全都记得住。只能在后面每次遇到再进一步熟悉的啊{:4_173:} 红影 发表于 2023-4-23 12:56
这个倒也不是，只是内容多啊，看一遍怎么可能全都记得住。只能在后面每次遇到再进一步熟悉的啊
客观来讲，这里介绍的内容被严格控制了，量并不大{:5_106:} 马黑黑 发表于 2023-4-23 12:58
客观来讲，这里介绍的内容被严格控制了，量并不大
每一节量不大，但总的还是不少啊，一次性记住怎么可能{:4_173:} 红影 发表于 2023-4-23 13:57
每一节量不大，但总的还是不少啊，一次性记住怎么可能
还是很好记的 马黑黑 发表于 2023-4-23 22:35
还是很好记的
熟悉的人肯定好记，不熟的光还是去理解就要半天{:4_173:} 红影 发表于 2023-4-24 19:56
熟悉的人肯定好记，不熟的光还是去理解就要半天
css-doodle需要理解的似乎不多，主要还是记住它既定约成的东东
页:
[1]