将变量传递给 LESS.js 样式表

Posted 2023-02-24

【中文标题】将变量传递给 LESS.js 样式表

【英文标题】：Passing Variables to a LESS.js Stylesheet

【发布时间】：2012-01-23 07:01:54

【问题描述】：

我在数据库中定义了几个变量（十六进制颜色）。我需要通过 php 将这些变量从 mysql 传递到 LESS.js 样式表。可能吗？

如果没有，有什么建议可以做类似的事情吗？变亮和变暗变量是关键。

【问题讨论】：

你是如何将 LESS 转换为 CSS 的？

立即设置客户端。我正在寻找类似的东西： href="styles.less&var=FFF"

嗯，一旦你编译它，曾经有任何变量的概念就消失了。如果您打算在服务器端进行操作，那肯定是可能的，尽管我不确定如何操作。我能想到的最好的事情是让 PHP 用这些变量生成一个 LESS 样式表，然后用其他所有东西编译它。

有趣，谢谢，我会玩弄的。

【参考方案1】：

我想到的最佳方法是动态生成使用 PHP（包括您的 vars）的 LESS 文件。

1\您需要在 html 页面中包含一个新样式表。

<link rel='stylesheet/less' href='css/style.php' />

2\ 在您的 style.php 中包含您的 PHP 变量，如下所示：

<?php header("Content-type: text/css; charset: UTF-8"); ?>

@brand_color_1 = <?php echo $brand_color_1; ?>;
/* Add all other vars do you need. */

3\ 然后在style.php 的底部（或在 LESS var 声明之后）添加所有需要的导入，如下所示：

<?php
  header("Content-type: text/css; charset: UTF-8");

  @brand_color_1 = <?php echo $brand_color_1; ?>;
  /* Add all other vars do you need. */

  @import "style.less";
?>

这将像时钟一样工作。

有一篇文章你可以read about CSS Variables with PHPChris Coyier写的。

---

另一个不推荐替代方法是在客户端编译 LESS 文件，您可以手动编译它们并通过 PHP 变量执行以下操作：

<script type="text/javascript">
var colors = '';
colors += '@brand_color_1: <?php echo $brand_color_1 ?>;'
colors += '@brand_color_2: <?php echo $brand_color_2 ?>;'
colors += '@import "style.less"';
// Add other imports.
var parser = new (less.Parser)();
parser.parse(colors, function(err, tree)  
  var css = tree.toCSS();
  // Add it to the DOM maybe via jQuery
);
</script>

【讨论】：

“3\”有问题，最后一个?>放错了！

【参考方案2】：

CSS：

#header 
    color:black;
    border:1px solid #dd44dd;


#header .navigation 
    font-size:12px;


#header .navigation a 
    border-bottom:1px solid green; 


#header .logo 
    width:300px;


#header .logo:hover 
    text-decoration:none;

少：

#header 
    color:black;
    border:1px solid #dd44dd;
    .navigation 
        font-size:12px; a 
            border-bottom:1px solid green;
        
    
.logo 

【讨论】：

Stack Exchange 上的所有内容都是CC-by-SA。如果您不同意这些条款，则 Stack Exchange 不是您贡献的有效渠道。