PostCSS 三角函数

npm install @csstools/postcss-trigonometric-functions --save-dev

PostCSS 三角函数 让您使用 sin, (中文(简体) ), cos, (中文(简体) ), tan, (中文(简体) ), asin, (中文(简体) ), acos, (中文(简体) ), atan 财务报告和审定财务报表 atan2 来计算三角关系 CSS 数值 4 规格.

.trigonometry {
    line-height: sin(pi / 4);
    line-height: cos(.125turn);
    line-height: tan(50grad);
    transform: rotate(asin(-1));
    transform: rotate(asin(sin(30deg + 1.0471967rad)));
    transform: rotate(acos(-1));
    transform: rotate(acos(cos(0 / 2 + 1 - 1)));
    transform: rotate(atan(infinity));
    transform: rotate(atan(e - 2.7182818284590452354));
    transform: rotate(atan2(-infinity,-infinity));
    transform: rotate(atan2(-infinity,infinity));
    transform: rotate(atan2(-infinity,infinity));
    transform: rotate(atan2(90, 15));
}

/* becomes */

.trigonometry {
    line-height: calc(0.70711);
    line-height: calc(0.70711);
    line-height: calc(1);
    transform: rotate(calc(-90deg));
    transform: rotate(calc(89.99995deg));
    transform: rotate(calc(180deg));
    transform: rotate(calc(0deg));
    transform: rotate(calc(90deg));
    transform: rotate(calc(0deg));
    transform: rotate(calc(-135deg));
    transform: rotate(calc(-45deg));
    transform: rotate(calc(-45deg));
    transform: rotate(calc(80.53768deg));
}

使用量

添加 PostCSS 三角函数 对您的项目:

npm install postcss @csstools/postcss-trigonometric-functions --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssTrigonometricFunctions = require('@csstools/postcss-trigonometric-functions');

postcss([
    postcssTrigonometricFunctions(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

关于自定义属性

鉴于自定义属性的动态性质,不可能知道可变值是什么,这意味着插件不能计算样式表的最终值.

因此,任何含有 var 被跳过.

单位

PostCSS 三角函数 允许您使用不同的特殊单位,这些单位位于光谱范围内,在运行时计算,以便能够计算出三角函数的结果.

支助以下单位:

• pi: 计算为 Math.PI 这是 3.141592653589793
• e: 计算为 Math.E 这是 2.718281828459045
• infinity, (中文(简体) ), -infinity: 计算为 Infinity 财务报告和审定财务报表 -Infinity 页:1 请注意,使用方式不敏感 InFiNiTy 是一个有效的值.

一些计算(例如: sin(-infinity)) 可能会返回 NaN 根据规格。 鉴于此 NaN 无法取而代之的是一个对 CSS 有用的值,它仍然留在原地,因为其结果会被浏览器有效忽略.

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

postcssTrigonometricFunctions({ preserve: true })

.trigonometry {
    line-height: sin(pi / 4);
    line-height: cos(.125turn);
    line-height: tan(50grad);
    transform: rotate(asin(-1));
    transform: rotate(asin(sin(30deg + 1.0471967rad)));
    transform: rotate(acos(-1));
    transform: rotate(acos(cos(0 / 2 + 1 - 1)));
    transform: rotate(atan(infinity));
    transform: rotate(atan(e - 2.7182818284590452354));
    transform: rotate(atan2(-infinity,-infinity));
    transform: rotate(atan2(-infinity,infinity));
    transform: rotate(atan2(-infinity,infinity));
    transform: rotate(atan2(90, 15));
}

/* becomes */

.trigonometry {
    line-height: calc(0.70711);
    line-height: sin(pi / 4);
    line-height: calc(0.70711);
    line-height: cos(.125turn);
    line-height: calc(1);
    line-height: tan(50grad);
    transform: rotate(calc(-90deg));
    transform: rotate(asin(-1));
    transform: rotate(calc(89.99995deg));
    transform: rotate(asin(sin(30deg + 1.0471967rad)));
    transform: rotate(calc(180deg));
    transform: rotate(acos(-1));
    transform: rotate(calc(0deg));
    transform: rotate(acos(cos(0 / 2 + 1 - 1)));
    transform: rotate(calc(90deg));
    transform: rotate(atan(infinity));
    transform: rotate(calc(0deg));
    transform: rotate(atan(e - 2.7182818284590452354));
    transform: rotate(calc(-135deg));
    transform: rotate(atan2(-infinity,-infinity));
    transform: rotate(calc(-45deg));
    transform: rotate(atan2(-infinity,infinity));
    transform: rotate(calc(-45deg));
    transform: rotate(atan2(-infinity,infinity));
    transform: rotate(calc(80.53768deg));
    transform: rotate(atan2(90, 15));
}