javascript - 在他们的一个例子中使用 ±

Question

在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 中使用吗？

Answer 1

这是使用+和-用于相同值的常见模式。or@p(±45deg)的简写形式也是如此。@p(+45deg, -45deg)@p(-45deg, +45deg)

这是 css-doodle 中特有但未记录的功能。

Answer 2

@p是的别名@pick

从给定列表中随机选择一个值。^参考

所以那个例子要么选择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>