@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>

前一篇: css-doodle入门（一）
下一篇: JS教程一