css-doodle属性


css-doodle 提供若干有用的属性，通过这些属性可以很方便地设置 css-doodle 图形图案（正如使用 CSS 描述HTML标签一样）。这些属性中，有一些在前面的教程中已经接触过了，这里将官网介绍的属性都一一梳理一下。


这里需要注意属性的语句结构。css-doodle的属性语句构成是这样：


    属性名称: 值; 【例】@grid: 6x6;


这和原生 CSS 属性的表达方法完全一致。


一、@grid 属性


@grid 属性写在 :doodle {} 代码块内，用于设定网格行列数。以下代码设置 6x6 的 css-doodle 图案：


<css-doodle>
        :doodle {
                @grid: 6;
                gap: 1px;
                width: 200px;
                height: 200px;
        }
        background: gray;
</css-doodle>


@grid: 6; 也可以写成 @grid: 6x6; 或者  @grid: 6,6; ，需要留意的是，使用多个数值表示行列时，遵循列先行后的规则，至少当前 pencil code (freeee.ml) 页面所使用的css-doodle组件是这样。


@grid 属性优先于 <css-doodle grid="6"> 里的 grid 设置，当二者都有设置， grid="6" 的设定会被 @grid: 6; 所覆盖。


二、 @size, @min-size, @max-size 属性


先说 @size 吧。


属性 @size 名称中，size是大小之意，该属性用于设定 css-doodle 图形（父元素）或单元格（子元素）的大小，同等于 CSS 的 width 和 height 值，下例设置父元素宽 240px 、高 180px，而第一列第二行的单元格也通过 @size 属性将其设置大小为 30x30 px的尺寸：


<css-doodle grid="4">
        :doodle {
                gap: 1px;
                @size: 240px 180px;
        }
        background: gray;
        @at(1,2) {
                @size: 30px;
        }
</css-doodle>


@size 值设定宽高不一样的值是，用空格将两个值隔开，也可以用小角逗号：@size: 240px,180px; ，效果一样。


至于 @min-size 和 @max-size 这两个属性，由 @size 派生出来，和 CSS 的 min-width， max-width，min-height，max-height 道理一致，表示最小尺寸和最大尺寸的设定：


@min-size: 100px; /* 最小尺寸为 100x100 */
@max-size: 200px; /* 最大尺寸为 200x200 */


三、@place-cell 属性


这是一个用来定位单元格位置的属性，相当于同时设置了单元格的CSS中的 left 和 top 属性。以下代码，我们将第一个单元格挪动了位置：


<css-doodle grid="4">
        :doodle {
                gap: 1px;
                @size: 240px;
        }
        background: gray;
        :after { content: @index(); }
        @nth(1) {
                background: green;
                @place-cell: 40px 80px;
                z-index: 100;
        }
</css-doodle>


选择器 @nth(1) {} 代码块设定第一个单元格的诸多属性，背景色绿色、用 @place-cell 属性定位到 left:40px; top: 80px 的位置，同时设置了 z-index 属性提升其在 Z轴 上的层级地位以避免移位之后该单元格会被其他单元格挡住。运行上面的代码，你还会发现文档流的自动“流窜”现象，这是因为，前方有一个单元格脱离了文档流、“让出”了自己的位置，后面的单元格就会争先恐后地挪位，不过这些行为是要秩序的。


四、@shape 属性


css-doodle 图形效果很大程度上因为 @shape 属性而更为精彩纷呈。使用 @shape 属性可以轻松定义单元格的形状：


circle 圆
triangle 三角形
rhombus 菱形
pentagon 正五边形
hexagon 六边形
heptagon 七边形
octagon 八角形
cross 十字形
star 五角星
diamond 钻石
infinity 无限大号
heart 心形
fish 鱼儿
whale 鲸鱼
pear 梨形
bean 豌豆
(hypocycloid, 3) 三角圆内螺线形
(hypocycloid, 4) 四角圆内螺线形
(hypocycloid, 5) 五角圆内螺线形
(hypocycloid, 6) 六角圆内螺线形
bicorn 双角兽形
(clover, 3) 三叶草
(clover, 4) 四叶草
(clover, 5) 五叶草
(bud, 3) 三角花蕾
(bud, 4) 四角花蕾
(bud, 5) 五角花蕾
(bud, 10) 十角花蕾
（注：花蕾最多可以有11个角）


比如下面的代码，第一个单元格我们设置其形状为六角花蕾：


<css-doodle grid="4">
        :doodle {
                gap: 1px;
                @size: 240px;
        }
        background: gray;
        :after { content: @index(); }
        @nth(1) {
                background: green;
                @place-cell: 40px 80px;
                @shape: bud 6;
                z-index: 100;
        }
</css-doodle>


@shape 属性值当存在数字是，数字与形状名称之间可以用空格或逗号隔开。


五、@use 属性


@use 属性允许以特定方式将 css-doodle 的设置写在 CSS 代码块中，即 <style> ... </style> 省略号所处的地方，然后，用 @use 属性通过预定义的样式名称从CSS里引用预设的样式。请看代码加以理解：


<style>
css-doodle {
        --basic: (
                :doodle { @grid: 2 / 200px; }
                background: purple;
                @shape: fish;
                transform: rotate(-30deg);
                cursor: pointer;
        );
}
</style>


<css-doodle>
        @use: var(--basic);
        :hover { transform: rotate(30deg); }
</css-doodle>


上面的代码，前面部分是 <style> ... </style> 标签，该标签里面的代码中，我们有一个 css-doodle 属性，就是 css-doodle 的标签选择器，和 p 、span 等选择器一样。该选择器下，设计了一个 CSS 变量 --basic，结构为 --basic: (代码);，这个变量值就写在小角括号内，建议分行以方便阅读。代码是标准的 CSS+css-doodle代码，我们设计了 2x2 、200x200的网格，单元格紫色背景、鱼儿形状、旋转 -30度、鼠标指针为手型。


然后，在 <css-doodle> 标签代码块中，通过 @use 属性引用CSS预定义的变量值 --basic，引用语句是标准的CSS使用变量是的规范，@use: var(--basic); ；最后，我们给单元格设计一个鼠标指针划过时的样式：旋转 30度。


css-doodle的属性有一些也可以使用纯CSS表达，例如 @size 属性，直接用 width 和 height 来定义也是可以的。

前一篇: css-doodle入门（五）
下一篇: css-doodle入门（三）