如何从PHP（Laravel）便捷地向LESS预处理器传递变量？

方案1：服务端直接编译LESS #

既然你已经在用后端模板渲染（比如{{$color}}这种语法），完全可以在服务端把数据库里的颜色值注入到LESS变量中，再编译成CSS返回给前端。

• 示例（以Node.js的less模块为例）：

  // 服务端代码
  const less = require('less');
  // 从数据库取出颜色值
  const dbColor = '#1a73e8';
  const lessCode = `@blue: ${dbColor}; 
  .box { 
    color: @blue; 
  }`;
  
  less.render(lessCode, (err, output) => {
    // 将编译好的output.css发送给前端页面
  });
  

• 优势：全程服务端处理，前端无需额外JS，样式加载即生效，不会出现样式闪烁。
• 局限：只适合初始化时固定的样式，如果需要动态切换颜色（比如用户自定义主题），这个方案就不适用了。

方案2：客户端编译LESS时注入变量 #

如果你的项目是用客户端的less.js编译样式，可以直接在页面的LESS代码块里通过模板引擎注入数据库值：

<style type="text/less">
  @blue: {{$color}};
  .btn {
    background-color: @blue;
  }
</style>
<script src="less.js"></script>

• 优势：不需要额外写JS操作DOM，直接贴合LESS的变量使用逻辑，写法更自然。
• 局限：依赖客户端的less.js编译，会有轻微的样式加载延迟，适合对性能要求不高的场景。

方案3：优化你的CSS变量方案 #

你当前用的CSS变量方案其实非常实用，只是可以简化成纯模板注入，不需要JS：

<style>
  :root {
    --blue: {{$color}};
  }
  /* 不管是LESS还是原生CSS，都可以直接用这个变量 */
  .card {
    border-color: var(--blue);
  }
</style>

• 直接通过模板引擎把数据库值写入:root的CSS变量，页面加载时直接生效。如果后续需要动态修改颜色，再用你之前的setProperty方法即可，兼顾静态初始化和动态调整。
• 优势：兼容所有现代浏览器，写法简洁，灵活度高。

内容的提问来源于stack exchange，提问作者Luck Ramos