Less中应封装语义化背景图案函数，如.bg-pattern-dashed()，参数设默认值、避免硬编码单位，CSS值需引号包裹；复杂纹理优先用SVG base64而非多层CSS渐变，以保障兼容性与可维护性。
Less里怎么写可配置的背景图案函数
直接用 background-image 写渐变或斜线纹理，改颜色/间距/角度时得全局搜替换，一不小心就漏改。Less 的函数封装不是为了炫技，是把「图案逻辑」和「视觉参数」拆开——比如斜线背景，真正要变的只是 @color、@size、@angle，其他重复代码全交给函数生成。
实操建议：
- 用
.bg-pattern-dashed()这类语义化名称，别叫mixin1()；函数名本身就得让人一眼看懂用途 - 所有参数必须设默认值，比如
@color: #000; @size: 8px; @angle: 45deg，否则调用时少传一个就报错 - 避免在函数里硬编码单位，
@size * 2比16px更安全，单位继承自输入参数 - 生成的 CSS 值必须包裹在引号里再拼接，否则 Less 会尝试计算字符串，比如
"linear-gradient(" + @angle + ", " + @color + " 0%, transparent 50%)"
为什么用 svg-base64 而不是纯 CSS 渐变做复杂纹理
CSS 渐变（linear-gradient、repeating-linear-gradient）对简单条纹够用，但遇到点阵、波浪、网格等稍复杂的图案，代码迅速膨胀，且 Safari 旧版对多层渐变叠加的支持不一致。SVG base64 是更稳的兜底方案：单个 data:image/svg+xml;base64,... 字符串就能描述任意矢量图案，Less 里用字符串拼接生成它，既保持可读性又无渲染兼容性风险。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 直接在 Less 里写未转义的 SVG XML（含
、<code>&），导致编译失败 —— 必须先用在线工具转成 base64，或用 Node.js 脚本预处理 - base64 字符串过长，某些构建工具（如早期 webpack css-loader）会截断 —— 建议把 SVG 文件单独存为
patterns/dots.svg，用@svg: ~"url('./patterns/dots.svg')"引入 - 没加
no-repeat和background-size，导致图案拉伸变形 —— 函数内部必须显式输出这两项
repeating-linear-gradient 在 Less 中的坑：角度与尺寸单位混用
很多人直接抄 MDN 的渐变示例，但在 Less 里把 @angle: 45 和 @gap: 2px 往 repeating-linear-gradient(@angle, ...) 里塞，结果浏览器报错或显示空白。根本原因是：CSS 渐变角度单位必须明确写 deg，而 Less 变量若定义为数字（@angle: 45），拼接后变成 repeating-linear-gradient(45, ...) —— 缺少单位，无效。
正确做法：
- 角度参数统一定义为带单位的值：
@angle: 45deg，或在函数内强制转换：unit(@angle, deg) - 尺寸类参数（
@width、@gap）必须带单位（px、rem），不能只传数字，否则@gap * 2会出错 - 渐变色停靠点要用相对单位（
0%、50%），别用像素值，否则缩放时图案错位 - 调试时临时加
background-color: fade(@color, 10%)，能快速确认图案是否真的没渲染出来，还是被盖住了
如何让背景图案函数支持暗色模式切换
单纯靠 @media (prefers-color-scheme: dark) 在 Less 里没法动态换变量值，因为 Less 是编译时处理，不是运行时。真要支持主题切换，得把图案逻辑拆成两套变量 + 一套函数，用 CSS 自定义属性承接主题状态。
实操建议：
- 定义两组变量：
@bg-pattern-light和@bg-pattern-dark，分别生成 base64 字符串 - 函数输出时用
background-image: var(--bg-pattern, @{bg-pattern-light});，而非直接写死值 - 在根元素设置：
:root { --bg-pattern: @{bg-pattern-light}; }，@media (prefers-color-scheme: dark) { :root { --bg-pattern: @{bg-pattern-dark}; } } - 注意：CSS 变量无法在 Less 函数里读取，所以图案生成仍需预编译，只是切换交由 CSS 层控制
最易被忽略的一点：图案函数生成的 background 值，如果包含多个渐变或 SVG，务必用 background: none 先清空，再逐层叠加，否则旧样式残留会导致意料外的覆盖。这不是 Less 的问题，是 CSS 层叠规则本身的要求。
