uses ± in one of their examples

Question

On the css-doodle site one of their first examples uses a '±' symbol like this:

/* 10 PRINT */

@grid: 16 / 320px;

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

I've never seen this used before in JS or CSS so I'm just wondering if this is some feature unique to css-doodle, or is this actually usable in either CSS or JS?

I'm a bit rusty in CSS, but it looks like thats a custom feature specific to `css-doodle` (implemented by whatever `@p` is). — SuperStormer, Apr 27 '21 at 23:43

score 2 · Answer 1 · answered Apr 28 '21 at 14:29

2

It's a common pattern to use + and - for the same value. So @p(±45deg) is a shorthand for @p(+45deg, -45deg) or @p(-45deg, +45deg).

This is a feature that is specific in css-doodle but not documented.

answered Apr 28 '21 at 14:29

yuanchuan

56
4

score 1 · Answer 2 · answered Apr 28 '21 at 00:23

@p is an alias of @pick

Randomly pick a value from the given list. ^ref

So that example with either pick 45deg or -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>

uses ± in one of their examples

2 Answers2