怎样在Less中利用if守卫实现多端CSS样式的条件编译-css教程-PHP中文网

less守卫不支持多端条件编译，仅用于混合调用时匹配预定义变量；多端样式需靠构建工具注入变量（如webpack/vite），再结合守卫分发规则。

怎样在less中利用if守卫实现多端css样式的条件编译

Less 本身不支持 if 守卫（guard）做“多端条件编译”——这不是语法限制问题，而是概念混淆：守卫用于混合（.mixin()）的匹配分支，不是构建时环境判断；所谓“多端样式”（如 PC / 移动端 / 小程序）需靠外部变量注入或构建流程控制，守卫只是配合它做逻辑分发。

Less 守卫只能匹配传入参数，不能读取运行环境

守卫（when）只在调用混合时，根据你传进去的值做静态比较，比如 @device: mobile 这个变量必须提前定义好，Less 编译器不会自动识别 UA、屏幕宽度或构建目标平台。

错误认知：.btn() when (is-mobile()) —— is-mobile() 不是内置函数，也不被支持
正确用法：守卫只响应你手动传入或顶层定义的变量，例如 @platform: 'weapp'
守卫不触发 CSS 输出，只决定哪个混合体生效；未匹配的分支完全不生成 CSS

实现多端样式的实际路径：变量 + 守卫 + 构建注入

真正可行的做法是把终端类型作为变量传入 Less 编译流程，再用守卫分发样式。例如 Webpack 的 less-loader 支持 modifyVars，Vite 可通过 css.preprocessorOptions.less.additionalData 注入变量。

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

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

下载

定义混合时用守卫区分：

.button-style(@platform) when (@platform = 'web') {
  padding: 12px 24px;
}
.button-style(@platform) when (@platform = 'weapp') {
  padding: 8px 20px;
  border-radius: 4px;
}

调用时必须显式传参：.button-style(@platform)，否则守卫无值可比
若用 @platform: 'web' 顶层定义，需确保它不被后续 @platform: 'weapp' 覆盖（Less 变量是“最后定义生效”，不是作用域覆盖）

容易踩的坑：守卫不支持嵌套判断和动态值

守卫表达式能力很弱，不能调用函数（除少数内置如 isnumber()）、不能拼接字符串、不能访问属性值——所有依赖都得是编译前已知的字面量或变量。

无效写法：.mixin(@p) when (string-append(@p, '-suffix') = 'web-suffix') —— string-append 不在守卫允许函数列表中
无效写法：.mixin(@p) when (get-unit(10px) = 'px') —— get-unit 不能在守卫中使用
有效但易错：.mixin(@p) when (@p = 'h5') or (@p = 'mp')，注意 or 两侧必须用括号包裹子条件
移动端适配别指望守卫自动响应 @media，守卫和媒体查询无关；响应式仍要靠 @media 写，守卫只管“哪套基础规则启用”