使用@m函数在css-doodle中快捷设置单元格渐变背景色

马黑黑

本文通过在 css-doodle 图案中用 rgb(红,绿,蓝) 颜色表达体系来完成单元格的背景颜色设置，展示 @multiple() 函数的强大功能。

@multiple() 函数用来重复指定的值，需要两个参数：① 重复次数，② 重复的值。@multiple 可以缩写为 @m 或 @M，例如，我们要重复三次“我”，我们可以给单元格伪元素这么赋值：

        :after {
                content: @m(3,'我'); /* 输出：我,我,我 */
                /* content: @M(3,'我');  输出：我 我 我 */
        }

小写 @m 输出的结果，重复值之间有小角逗号，大写 @M 则用空格取代小角逗号。

@multiple() 函数还可以进一步缩写：

        @m3('我')
        @M3('我')

这种缩写方式，是将重复次数直接跟在了 @m 或 @M 之后，使得语句更为简洁。

CSS 的 rgb() 颜色表达法，红绿蓝三种颜色数值从 0 到 255 之间，数值之间需要小角逗号隔开，故此使用 @m() 很合适。当然，我们首先需要取得 0-255 之间的随机数。

我们要取得从 0 到 255 之间的含头尾数的随机值，用 @r() 函数：

        @r(255)

这个随机值要重复三次，数值之间用逗号隔开，用 @m() 将之包裹起来：

        @m3(@r(255))

将上述式子用到 rgb() 颜色表达法语句里：

        rgb(@m3(@r(255)))

用到单元格的背景颜色属性设置：

        background: rgb(@m3(@r(255)));

很多场景，我们需要设置渐变背景，以 linear-gradient() 线性渐变为例，加入我们需要设计20种颜色，在 css-doodle 里，一切都很简单：重复上面的 rgb(@m3(@r(255))) 语句 20 次即可——

        background: linear-gradient(@m20(rgb(@m3(@r(255)))));

最后，给出一组实现题意的实例代码。若你能运行它，每次单击单元格的背景颜色都会不同：

<css-doodle click-to-update>
        :doodle {
                @grid: 1 / 400px;
        }
        background: linear-gradient(@m20(rgb(@m3(@r(255)))));
</css-doodle>

马黑黑

醉美水芙蓉 发表于 2023-5-27 11:45
加了渐变背景更漂亮！

做帖时根据情况来

小辣椒

纯加分，仰慕一下黑神，手机上来瞄一眼

红影

这个帖子太好了，原来M的大小写还有讲究的，之前完全不知道。
而且学习的时候一直是@m(次数,'内容')，还可以缩写成@m次数('内容')

红影

去你的论坛运行了一下代码，20种颜色组成的渐变好漂亮啊。还可以和平时的线性渐变一样加入角度的

梦缘

谢谢老师的分享，欣赏。

一斛珠

看不懂了

一斛珠

给黑黑老师

南无月

马黑黑

南无月 发表于 2023-5-27 21:37

谢茶

南无月

马黑黑 发表于 2023-5-27 21:39
谢茶

不客气是应该的

马黑黑

南无月 发表于 2023-5-27 21:39
不客气是应该的

应该的不是必须的

马黑黑

小辣椒 发表于 2023-5-27 13:24
纯加分，仰慕一下黑神，手机上来瞄一眼

手机看代码很漂亮的

马黑黑

一斛珠 发表于 2023-5-27 16:32
给黑黑老师

谢

马黑黑

红影 发表于 2023-5-27 13:34
这个帖子太好了，原来M的大小写还有讲究的，之前完全不知道。
而且学习的时候一直是@m(次数,'内容')，还可 ...

新版本支持这些

马黑黑

红影 发表于 2023-5-27 13:37
去你的论坛运行了一下代码，20种颜色组成的渐变好漂亮啊。还可以和平时的线性渐变一样加入角度的

角度必须可以加入

马黑黑

一斛珠 发表于 2023-5-27 16:32
看不懂了

慢慢看不急

红影

马黑黑 发表于 2023-5-27 22:35
新版本支持这些

是之前没讲过这个，弄得我一直看不懂为什么m缩写可以那样表示。

红影

马黑黑 发表于 2023-5-27 22:36
角度必须可以加入

嗯嗯，感受到了它和css命令一样的。