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([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>
这两个函数都是用来多次组合指定的值。两个函数所需要的两个参数一样:
@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教程一
发表评论:
评论列表 [0条]