css-doodle入门（五）

马黑黑

css-doodle 函数

css-doodle 提供有诸多函数，使得 css-doodle 实现丰富多彩的效果变得更为容易。和大部分选择器、属性一样，css-doodle 函数也需要 @ 做前缀，以单元格的索引号为例，其结构为：@index() 。

同是使用 @ 做前缀，容易让初学者产生混淆，所以在此区分一下选择器、属性和函数的构成方式：

① 选择器 → @名称 {}
② 属性 → @名称: 值；
③ 函数 → @名称()

① 选择器和CSS选择器一样，后面都跟一对花括号 {}，花括号里是该选择器的属性集合，所有的对应选择器的属性都写在花括号里；
② 属性隶属于某一选择器，它是选择器花括号之内的属性成员之一，它的构成相当于一个键值对 —— @名称: 值;；
③ 函数与JS函数构成方法一样，名称后面跟一对小括号 () ，小括号里可以有参数。

函数多少有点抽象，所以，本节选取部分函数进行解释，随着今后需求增加，诸位可以自行扩展。

一、@index() 函数 【 缩写 @i() 】

该函数返回单元格的索引号，索引号从 1 开始。以下示例，在 6x6 的网格里使用伪元素 ::before 给每一个单元格标注了序号（索引号），并通过算法将不同的单元格按照顺序依次改变背景色，二者的实现都离不开 @index() 函数的参与：

<css-doodle grid="6">
        :doodle {
                @size: 260px;
                grid-gap: 1px;
        }
        ::before { content: @index(); }
        background: hsl(calc(@index() * 10),100%,50%);
</css-doodle>

二、@row() 和 @col() 函数

@row() 函数返回单元格的行序号即网格的第几行，@col() 返回单元格的列序号即网格中的第几列。下例，所有的单元格都通过这两个函数标注自己所在的行与列：

<css-doodle grid="4">
        :doodle {
                @size: 300px;
                grid-gap: 1px;
        }
        ::before { content: 行 @row(); }
        ::after { content: 列 @col(); }
        background: gray;
</css-doodle>

三、@size() 和 @size-row() 、 @size-col() 函数

@size() 返回网格的单元格总数，即，css-doodle 图案里有多少个单元格。以下代码，每一个单元格都以 x/y 的形式显示当前的单元格序号（x）和单元格总数（y）:

<css-doodle grid="3">
        :doodle {
                @size: 260px;
                gap: 1px;
        }
        background: steelblue;
        ::before { content: @i() / @size(); }
</css-doodle>

代码中，通过单元格的伪元素 ::before {} 显示内容（content），@i() 是 @index() 函数即单元格序列号的缩写，@size() 带括号也是一个函数而不是它上面的主元素的属性值（@size: 260px;），就是 @size() 函数返回了网格的单元格总数。

而 @size-row() 返回网格的最大行数、 @size-col() 返回网格的最大列数。这三个函数，常用语高级应用中，这里先做一般了解就好。

四、@pick() 和 @pick-n() 、@pick-d() 函数

函数可以带参数，例如，@pick('red','tan') 函数中，@pick() 函数带有两个参数，红色和褐色。@pick() 中的 pick 是采摘、选取之意，函数的意思是，在所给的参数中选取一个值。下面的代码将在红色和褐色两种颜色中随机选取一个给 css-doodle 图案主元素设置背景色：

<css-doodle>
        :doodle {
                @size: 200px;
                background: @pick('red','tan');
        }
</css-doodle>

不论给出多少个备选参数，@pick() 函数值选择其中的一个。

@pick-n() 函数从指定参数中逐一选择一个值，例如，@pick-n('red','blue','green') 这样的函数，会先选择红色，然后蓝色，接着绿色，直至选完后如果仍有单元格需要赋值，则从头再选一次。试着体会如下代码：

<css-doodle grid="10x1">
        :doodle {
                @size: 400px 40px;
                gap: 1px;
        }
        background: @pick-n('red','blue','green');
</css-doodle>

@pick-d() 函数也会在函数的参数列表中选择一个值，但是，随机选择而不是逐一选择，试着用  @pick-d('red','blue','green') 替代前面代码中的单元格 background 属性值。

同样是随机，@pick() 和 @pick-d() 是有区别的，主要体现在选择结果上：使用前者，会出现相邻单元格得到了相同的颜色，使用后者则不会；原因在过滤性选择之上——@pick() 没有做过滤，@pick-d() 有过滤机制。

五、@calc() 函数

@calc() 函数是一个运算函数，用来求值，实际上 CSS 的 calc() 和它是等价的。

下面的代码，我们在 4x4 的网格中给单元格设定了背景色，可以尝试用被注释的语句替换它的上一句看看效果：

<css-doodle grid="4">
        :doodle {
                @size: 240px;
                gap: 1px;
        }
        background: hsl(@calc(@index() * 25), 65%, 42%);
        /*background: hsl(calc(@index() * 25), 65%, 42%);*/
</css-doodle>

代码中，@calc(@index() * 25) 和 calc(@index() * 25) 完全相等。css-doodle 标签里，完全接受原生的CSS代码。

六、@var() 函数

对应于 CSS 的变量引用函数 var()，css-doodle 的 @var(--变量名) 等价于 CSS 的 var(--变量名)。

下面这组代码，我们设置了一个CSS变量和值， --bg: gray，我们通过 @var() 函数令 css-doodle 主元素获得该CSS变量值做背景颜色，然后再通过伪类鼠标滑过事件令变量 --bg 改变其值为 purple：

<css-doodle grid="1">
        :doodle {
                --bg: gray;
                @size: 240px;
                gap: 1px;
                background: @var(--bg);
                /*background: var(--bg);*/
        }
        :doodle(:hover) { --bg: purple; }
</css-doodle>

将有注释的语句替换其上的语句，效果一致，可见，@var()函数 等价于原生CSS的 var() 函数。css-doodle 还能使用常规CSS <style> 标签下的变量。

七、@rand() 函数 【 缩写 @r() 】

@rand() 函数随机返回两个数字键的一个值。这是一个重要且经常用得上的函数。

以下代码，每一次运行，都会得到1-3之间的一个浮点数：

<css-doodle>
        :doodle {
                @size: 240px;
                background: lightblue;
        }
        :after { content: @rand(1,3); }
</css-doodle>

@rand() 函数可以只有一个参数，当它只有一个参数时，其取值边界是 0 到 该值之间的浮点数，例如，@rand(2)，得到的值在 0-2 之间，@r(-1)，得到的值在 -1 至 0 之间。

@rand() 函数还可以在指定的字母范围随机取出一个字母：@rand(a,z) 得到一个随机小写字母，@rand(A,Z)得到一个随机大写字母。

@rand() 可以缩写为 @r() 。

红影

黑黑咋不附上这个了，害得我还去前面找
http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html

红影

一、@index() 函数 【 缩写 @i() 】
学习笔记：1、没想到这个可以缩写，要不是看了这个帖子，肯定对缩写迷糊了
2、background: hsl(calc(@index() * 10),100%,50%); 还能用在hsl颜色里，太想不到了

红影

二、@row() 和 @col() 函数
学习笔记：
1、这两个前面讲过，上次是给行或列赋底色，原来它们还可以用来做索引，而且通过伪元素将行列一起给出来
2、::before { content: 行 @row(); }记得以前提过一嘴，css-doodle的可以用一个冒号？

红影

三、@size() 和 @size-row() 、 @size-col() 函数
学习笔记：
1、@size带小括号和不带括号用法是不一样的呢

红影

四、@pick() 和 @pick-n() 、@pick-d() 函数
学习笔记：
1、这个头一次看到，通俗地理解的话，@pick()是随便乱选，-n的是按顺序依次选择，-d是随机定顺序，然后依次选择？

红影

六、@var() 函数
学习笔记：
1、这个和css里的差不多，多了个艾特。

红影

七、@rand() 函数 【 缩写 @r() 】
学习笔记
1、这个也是对缩写没想到，看到这个字母还以为是圆呢

马黑黑

红影 发表于 2023-4-15 10:53
七、@rand() 函数 【 缩写 @r() 】
学习笔记
1、这个也是对缩写没想到，看到这个字母还以为是圆呢{:4_173 ...

初学是不用缩写也行

红影

马黑黑 发表于 2023-4-15 11:56
初学是不用缩写也行

不缩写最好，否则太容易混了。

马黑黑

红影 发表于 2023-4-15 13:01
不缩写最好，否则太容易混了。

缩写和语法糖是差不多的原理

樵歌

理论，都是理论

马黑黑

樵歌 发表于 2023-4-15 14:42
理论，都是理论

樵歌

马黑黑 发表于 2023-4-15 17:21

可你这学生不大愿学理论，个个是行动派

红影

马黑黑 发表于 2023-4-15 13:07
缩写和语法糖是差不多的原理

都是为了方便使用的吧。

马黑黑

红影 发表于 2023-4-15 20:38
都是为了方便使用的吧。

太方便了

马黑黑

樵歌 发表于 2023-4-15 17:33
可你这学生不大愿学理论，个个是行动派

行动需要理论的支撑

雨中悄然

来上课了

马黑黑

雨中悄然 发表于 2023-4-15 21:06
来上课了

这个有点枯燥