<css-doodle> 在他们的一个例子中使用 ±

如何解决<css-doodle> 在他们的一个例子中使用 ±

在 css-doodle 站点上，他们的第一个示例使用了这样的“±”符号：

/* 10 PRINT */

@grid: 16 / 320px;

@size: 1px calc(141.4% + 1px);
transform: rotate(@p(±45deg));
background: #AEACFB;
margin: auto;

我以前从未在 JS 或 CSS 中使用过它，所以我只是想知道这是否是 css-doodle 独有的一些功能，或者它实际上可以在 CSS 或 JS 中使用吗？

解决方法

对相同的值使用 + 和 - 是一种常见模式。所以 @p(±45deg) 是 @p(+45deg,-45deg) 或 @p(-45deg,+45deg) 的简写。

这是一个在 css-doodle 中特定但没有记录的功能。

,

@p 是 @pick

的别名

从给定的列表中随机选择一个值。 ^ref

那个例子选择 45deg 或 -45deg

<script src="https://unpkg.com/css-doodle@0.15.3/css-doodle.min.js"></script>

Only 45deg
<css-doodle>
  @grid: 16 / 320px;
  @size: 1px calc(141.4% + 1px);
  transform: rotate(@p(45deg));
  background: #AEACFB;
  margin: auto;
</css-doodle>

only -45deg
<css-doodle>
  @grid: 16 / 320px;
  @size: 1px calc(141.4% + 1px);
  transform: rotate(@p(-45deg));
  background: #AEACFB;
  margin: auto;
</css-doodle>

both 45deg and -45deg
<css-doodle>
  @grid: 16 / 320px;
  @size: 1px calc(141.4% + 1px);
  transform: rotate(@p(±45deg));
  background: #AEACFB;
  margin: auto;
</css-doodle>