Chuyển các Biến sang Biểu định kiểu LESS.js

Question

Tôi có một số biến (màu hex) được xác định trong cơ sở dữ liệu. Tôi cần phải chuyển các biến này từ MySQL sang một bản định kiểu LESS.js thông qua PHP. Khả thi?

Nếu không, bạn có lời khuyên nào về cách làm điều tương tự không? Các biến làm sáng và tối là chìa khóa.

Answer 1

Cách tiếp cận tốt nhất mà tôi nghĩ là để tạo động tệp LESS sử dụng PHP (bao gồm cả vars của bạn).

1 \ Bạn sẽ cần bao gồm một biểu định kiểu mới trong các trang HTML của mình.

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

2 \ Trong style.php của bạn bao gồm PHP của bạn vars như sau:

<?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 \ Sau đó ở phía dưới (hoặc sau khi bạn khai var LESS) của style.php tiện ích này tất cả các hàng nhập khẩu cần thiết của bạn như sau :

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

Điều này sẽ hoạt động như đồng hồ.

Có một bài viết bạn có thể read about CSS Variables with PHP được viết bởi Chris Coyier.

---

Một không được khuyến khích thay thế được biên soạn bạn file LESS ở phía máy khách, bạn có thể tay biên dịch chúng và vượt qua PHP vars làm như sau:

<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