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

Question

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

如果不是，任何建议的方式来做类似的事情？变亮和变暗是关键。

Answer 1

我想到的最好的方法是动态生成一个使用PHP（包括你的变量）的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的添加都需要进口如下：

<?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写。

---

另一个不建议替代被编译你少的文件在客户端，你可以手动编译并通过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> 

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