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

Question

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

如果不行，有没有类似的方法可以实现？调整变量的亮度和暗度是关键。

- Chords

---

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

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

一旦你编译过，就不再存在任何变量。如果你要在服务器端处理它，那当然是可能的，虽然我还不确定具体操作方式。我能想到的最好方法是让PHP生成一个带有这些变量的LESS样式表，然后将其与其他所有内容一起编译。 - Andrew Marshall

有趣，谢谢，我会试着玩一下。 - Chords

Answer 1

我想到的最好的方法是使用PHP动态生成一个LESS文件（包括您的变量）。

1. 您需要在HTML页面中包含一个新的样式表。

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

在你的 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 变量声明之后）添加您需要的所有导入，如下所示：

<?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";
?>

这将像时钟一样工作。

有一篇文章，你可以阅读关于使用PHP的CSS变量，作者是Chris 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>

- Rubens Mariuzzo

---

"3" 中存在问题，最后的 ?> 放错了位置！" - DUzun

Answer 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;
}

LESS：

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

- BreinSteinArchiTech54Apps

---

Stack Exchange上的所有内容都采用CC-by-SA协议发布。如果您不同意这些条款，那么Stack Exchange不是您发表内容的合适平台。 - Makoto