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() 。
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入门(四)
发表评论:
评论列表 [0条]