2021- css-doodle

css-doodle

一、 入门

1. 安装

1.1. 直接下最新版本或直接从 CDN ：

<script  src = "https://unpkg.com/css-doodle@0.19.2/css-doodle.min.js" ></script>
<css-doodle >
  /* 把你的代码放在这里 */
</css-doodle>

1.2. npm 或者 yarn导入

yarn add css-doodle
# or
npm install css-doodle
import 'css-doodle';

二、用法

css-doodle 的语法基于 CSS，并提供了几个额外的实用功能和速记属性。

1. 属性

1.1 grid

• 网格中的行数和列数由grid元素上的属性定义，范围从1到32。当没有给定值或 0 时，它的默认值为1x1。

<!-- 
	grid="5"  这个是为x,y分布是5; 可以书写 grid="3 x 5" : 就是可以理解x为2，y为5的图形
	grid-gap: 1px; /* 间隙为1px */
-->
<css-doodle grid="5">
  :doodle {
    grid-gap: 1px;
    width: 8em; 
    height: 8em;
  }
  background: #60569e;
</css-doodle>

在n x m如下的顺序*（列，行）或（X，Y）* 。以下grid值的格式都是可识别的：

• grid = "0"

• grid = "5"

• grid = "20"

• grid = "5x7"

• grid = "5 x 7"

• grid = "5,7"

• 仅当网格为一维时，行或列限制为1024

<!--
	@size: 8em; 意思就是说：宽高为8em； width: 8em; height: 8em;
	width: @rand(5%, 100%)： 思思为随便生成 宽度5 - 100%的宽
-->
<css-doodle grid="1x35">
  :doodle {
    grid-row-gap: 1px;
    @size: 8em; /* width: 8em; height: 8em; */
  }
  background: #60569e;
  width: @rand(5%, 100%); /* from 5% to 100% by random */
</css-doodle>

• 还可以直接在:doodle 里面写 grid

<!-- 我相信很多人看不懂：5 / 8em 是什么意思，我这里解释一下，
	如：第一个5代表，x,y都是5 x 5的模式，只是简写了（这个是作者在下面没有提到的）
	我们可以自己改造一下：
		:doodle{
			@grid: 2 x 5 / 8em
		}
	这个的意思是说，x为2，y为5的，然后是占 8em字节的宽度
-->
<css-doodle>
  :doodle {
    @grid: 5 / 8em;
  }
  background: #60569e;
  transform: scale(@rand(.2, .9));
</css-doodle>

1.2 use的使用 参考MDN的写法

<style>
  css-doodle {
    --rule: (
      @grid: 5 / 8em;
      --d: @p(45deg, -45deg, 135deg, -135deg);
      --lg: linear-gradient(@var(--d),#60569e 50%,transparent 0);
      background:
        @var(--lg) 0 0 / 100% 100%,
        @var(--lg) 0 0 / 50% 50%;
    );
  }
</style>
<css-doodle use="var(--rule)"></css-doodle>

1.3. seed的使用

<css-doodle seed="2020">
  :doodle {
    @grid: 5 / 8em;
  }
  background: #60569e;
  transform: scale(@rand(.2, .9));
</css-doodle>