Less无原生shape函数，需用递归mixin封装正多边形顶点计算，如六边形按60°均分角度，坐标靠预设值或参数实现，禁用Sass语法。
Less里没有shape函数，别指望直接调用
Less原生不提供任何几何图形生成能力，clip-path、border-radius或transform相关值全得手动拼。所谓“快速生成”，本质是把重复的坐标计算逻辑封装成mixin，靠递归或循环展开为固定CSS规则。直接搜“Less shape generator”抄来的代码大概率报错——因为它们常混用Sass语法（比如@for）或假定存在第三方插件。
用递归mixin封装正多边形顶点计算
以正六边形为例，6个顶点需按角度均分（360°/6 = 60°），每个点坐标为cos(θ) * r和sin(θ) * r。Less不支持cos/sin，但可用预设值硬编码，或接受半径+边数作为参数，用守卫条件控制递归深度：
.polygon-vertices(@n, @r: 100px, @i: 0) when (@i
-
cos/sin在Less中仅支持弧度制，但输入角度需转为rad单位，实际项目中建议直接查表替换为小数（如cos(60deg)→0.5）避免编译失败 - 递归终止条件
when (@i 必须显式声明，漏写会导致无限递归卡死编译器 -
round()函数只在Less 4.0+支持，旧版本需改用floor()或硬编码数值
生成clip-path多边形路径要小心单位和空格
最终目标是输出类似clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%)的规则，但Less插值对空格极其敏感：
- 用
@{x} @{y}拼接会多出空格，导致clip-path解析失败；必须写成@{x}@{y}再手动加空格 - 百分比值需显式写
%，不能依赖unit(@x, %)——该函数在计算中可能丢失精度 - 首尾坐标不必闭合（浏览器自动连接），但若手动重复首坐标，容易因浮点误差导致微小偏移
三角形/星形等非正多边形得单独建模
正五角星这类图形顶点不共圆，无法用单一半径+角度公式覆盖。更可行的做法是定义专用mixin，把关键坐标作为参数传入：
.star-5-points(@size: 100px) {
@p1: 0% 50%;
@p2: 50% 0%;
@p3: 100% 50%;
@p4: 75% 100%;
@p5: 25% 100%;
clip-path: polygon(@p1, @p2, @p3, @p4, @p5);
}
这种写法看似笨重，但规避了Less数学能力的硬伤。真正复杂图形（如心形、贝塞尔曲线）建议放弃Less，改用SVG或JS动态生成——Less不是通用计算引擎，强行塞进太多逻辑只会让维护成本飙升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
