將變量傳遞給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