एक LESS.js स्टाइलशीट

Question

पर वैरिएबल पास करना मेरे पास डेटाबेस में परिभाषित कई चर (हेक्स रंग) हैं। मुझे इन चरों को PHP के माध्यम से MySQL से LESS.js स्टाइलशीट में पास करने की आवश्यकता है। मुमकिन?

यदि नहीं, तो कुछ ऐसा करने के तरीके पर कोई सलाह? हल्के और गहरे चर महत्वपूर्ण हैं।

Answer 1

मेरे दिमाग में आने वाला सबसे अच्छा तरीका गतिशील PHP (आपके वर्र्स समेत) का उपयोग करके एक कम फ़ाइल है।

1 \ आपको अपने HTML पृष्ठों में एक नई स्टाइल शीट शामिल करने की आवश्यकता होगी।

<?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 के अपने सभी की जरूरत आयात जोड़ने तब:

<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. */ 

    @import "style.less"; 
?> 

यह घड़ी की तरह काम करेगा।

एक लेख है जिसे आप Chris Coyier द्वारा लिखे गए एक लेख में कर सकते हैं।

---

एक और अनुशंसित नहीं विकल्प क्लाइंट साइड में आप कम फ़ाइलें संकलन है, तो आप कर सकता है मैन्युअल उन्हें संकलन और पारित पीएचपी निम्न कार्य वार्स:

<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

सीएसएस:

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

कम:

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