Question

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

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

Answer 1

我认为最好的方法是使用PHP 动态生成一个LESS文件（包括你的vars）。

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的底部（或在你没有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 PHP撰写了一篇文章Chris Coyier。

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

<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>

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

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

2 个答案: