使用@m函数在css-doodle中快捷设置单元格渐变背景色
本帖最后由 马黑黑 于 2023-5-27 11:45 编辑本文通过在 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
加了渐变背景更漂亮！
做帖时根据情况来 纯加分，仰慕一下黑神，手机上来瞄一眼{:4_189:} 这个帖子太好了，原来M的大小写还有讲究的，之前完全不知道。
而且学习的时候一直是@m(次数,'内容')，还可以缩写成@m次数('内容'){:4_199:} 去你的论坛运行了一下代码，20种颜色组成的渐变好漂亮啊。还可以和平时的线性渐变一样加入角度的{:4_173:} 谢谢老师的分享，欣赏。 看不懂了{:4_173:} 给黑黑老师{:4_199:} {:4_190:} 南无月 发表于 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命令一样的。