如何在Less中编写支持不同方向渐变的通用CSS混合宏？-css教程-PHP中文网

less中用参数控制渐变方向需通过guard条件区分关键词与角度值：top→to bottom、right→to right、bottom→to top、left→to left，角度值（如135deg）直接透传；必须用default()兜底处理未匹配情况，并避免~拼接导致语法错误。

如何在less中编写支持不同方向渐变的通用css混合宏？

Less中怎么用参数控制渐变方向

Less的.gradient()混合宏要支持不同方向，核心是把方向值作为参数传入，而不是写死to right或45deg。方向参数可以是关键词（top、right、bottom、left）或角度值（135deg），但必须统一转换为CSS标准语法——比如top得转成to bottom，right转成to right。

常见错误是直接拼接字符串：background: linear-gradient(@dir, @a, @b)，当@dir是top时会生成linear-gradient(top, ...)，浏览器不认——必须提前映射为合法值。

top → to bottom
right → to right
bottom → to top（注意：CSS中to bottom表示从上到下，所以“顶部起点”对应to bottom；而“bottom”作为方向参数通常指“从底部开始”，即终点在顶部，所以是to top）
left → to left
角度值如120deg保持原样，不加to

如何用Guard条件区分关键词和角度值

Less不支持运行时类型判断，但可以用Guard匹配模式。关键不是用isnumber()——角度可能是45deg这种带单位的值，isnumber(45deg)返回false。正确做法是用正则匹配单位：

.gradient(@dir, @a, @b) when (iskeyword(@dir)) and (@dir = top) {
  background: linear-gradient(to bottom, @a, @b);
}
.gradient(@dir, @a, @b) when (iskeyword(@dir)) and (@dir = right) {
  background: linear-gradient(to right, @a, @b);
}
.gradient(@dir, @a, @b) when (default()) {
  // fallback: assume it's an angle or valid direction syntax
  background: linear-gradient(@dir, @a, @b);
}

这里default()兜底很重要——它捕获所有未被前面条件匹配的情况，包括135deg、to left甚至用户直接传入的to bottom。不加这个，角度值会被忽略。

容易踩的坑：漏掉bottom和left的分支，或把to top错写成top，导致生成无效CSS。

怎么让混合宏兼容旧版IE滤镜（可选但实用）

如果项目还需支持IE9及以下，filter: progid:DXImageTransform.Microsoft.gradient(...)仍需保留。但它的方向参数是数字：0（左→右）、1（下→上）、2（右→左）、3（上→下）。这和CSS方向不一致，必须单独映射：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

to right / left → 0
to bottom / top → 3
to top / bottom → 1
to left / right → 2

实际写法是在每个Guard分支里补上filter声明，例如：

.gradient(@dir, @a, @b) when (iskeyword(@dir)) and (@dir = top) {
  background: linear-gradient(to bottom, @a, @b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@{a}', endColorstr='@{b}', GradientType=3);
}

注意GradientType值和方向的对应关系容易记反——3才是垂直向下（top→bottom），不是1。

为什么不能用`~"string"`拼接方向

有人尝试用~"to @{dir}"或~"@{dir}"绕过Guard，这看似简单，但风险很大：

当@dir: 135deg时，~"to @{dir}"变成to 135deg，语法错误
当@dir: bottom时，~"to @{dir}"是to bottom，合法；但@dir: to bottom时又变成to to bottom
无法区分用户本意是关键词还是完整语法，容错率极低