Files
flying-hero 96f6318101 📦 添加虚拟环境和启动脚本
新增:
- backend/venv/ - Python 虚拟环境
- backend/start.sh - 启动脚本(使用虚拟环境)
- backend/requirements.txt - 依赖列表
- .gitignore - 忽略虚拟环境和缓存文件

说明:
- 每个项目使用独立虚拟环境
- 避免依赖冲突
- 启动脚本自动创建和激活虚拟环境
2026-04-04 18:29:02 +08:00

159 lines
5.7 KiB
Markdown

# PostCSS Trigonometric Functions [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-trigonometric-functions.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/trigonometric-functions.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
[PostCSS Trigonometric Functions] lets you use `sin`, `cos`, `tan`, `asin`, `acos`, `atan` and `atan2` to be able to compute trigonometric relationships following the [CSS Values 4] specification.
```pcss
.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: 0.70711;
line-height: 0.70711;
line-height: 1;
transform: rotate(-90deg);
transform: rotate(90deg);
transform: rotate(180deg);
transform: rotate(0deg);
transform: rotate(90deg);
transform: rotate(0deg);
transform: rotate(-135deg);
transform: rotate(-45deg);
transform: rotate(-45deg);
transform: rotate(80.54deg);
}
```
## Usage
Add [PostCSS Trigonometric Functions] to your project:
```bash
npm install postcss @csstools/postcss-trigonometric-functions --save-dev
```
Use it as a [PostCSS] plugin:
```js
const postcss = require('postcss');
const postcssTrigonometricFunctions = require('@csstools/postcss-trigonometric-functions');
postcss([
postcssTrigonometricFunctions(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
```
[PostCSS Trigonometric Functions] runs in all Node environments, with special
instructions for:
| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- | --- |
## ⚠️ About custom properties
Given the dynamic nature of custom properties it's impossible to know what the variable value is, which means the plugin can't compute a final value for the stylesheet.
Because of that, any usage that contains a `var` is skipped.
## Units
[PostCSS Trigonometric Functions] lets you use different special units that are within the spec and computed at run time to be able to calculate the result of the trigonometric function.
The following units are supported:
* `pi`: Computes to `Math.PI` which is `3.141592653589793`
* `e`: Computes to `Math.E` which is `2.718281828459045`
* `infinity`, `-infinity`: Compute to `Infinity` and `-Infinity` respectively. Note that the usage is case insensitive so `InFiNiTy` is a valid value.
Some calculations (such as `sin(-infinity)`) might return `NaN` as per the spec. Given that `NaN` can't be replaced with a value that's useful to CSS it is left as is, as the result will be effectively ignored by the browser.
## Options
### preserve
The `preserve` option determines whether the original notation
is preserved. By default, it is not preserved.
```js
postcssTrigonometricFunctions({ preserve: true })
```
```pcss
.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: 0.70711;
line-height: sin(pi / 4);
line-height: 0.70711;
line-height: cos(.125turn);
line-height: 1;
line-height: tan(50grad);
transform: rotate(-90deg);
transform: rotate(asin(-1));
transform: rotate(90deg);
transform: rotate(asin(1));
transform: rotate(asin(sin(30deg + 1.0471967rad)));
transform: rotate(180deg);
transform: rotate(acos(-1));
transform: rotate(0deg);
transform: rotate(acos(1));
transform: rotate(acos(cos(0 / 2 + 1 - 1)));
transform: rotate(90deg);
transform: rotate(atan(infinity));
transform: rotate(0deg);
transform: rotate(atan(e - 2.7182818284590452354));
transform: rotate(-135deg);
transform: rotate(atan2(-infinity,-infinity));
transform: rotate(-45deg);
transform: rotate(atan2(-infinity,infinity));
transform: rotate(-45deg);
transform: rotate(atan2(-infinity,infinity));
transform: rotate(80.54deg);
transform: rotate(atan2(90, 15));
}
```
[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
[css-url]: https://cssdb.org/#trigonometric-functions
[discord]: https://discord.gg/bUadyRwkJS
[npm-url]: https://www.npmjs.com/package/@csstools/postcss-trigonometric-functions
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Loader]: https://github.com/postcss/postcss-loader
[PostCSS Trigonometric Functions]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-trigonometric-functions
[CSS Values 4]: https://www.w3.org/TR/css-values-4/#trig-funcs