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() 。

前一篇: 百分浏览器快捷键
下一篇: css-doodle入门（四）