问题描述
在 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>