Passaggio di variabili a un foglio di stile LESS.js

Question

Ho diverse variabili (colori esadecimali) definite in un database. Ho bisogno di passare queste variabili da MySQL a un foglio di stile LESS.js tramite PHP. Possibile?

In caso negativo, qualche consiglio su come fare qualcosa di simile? Le variabili lighten e darken sono fondamentali.

Answer 1

L'approccio migliore che mi viene in mente è quello di generare dinamico un file LESS utilizzando PHP (compresi i tuoi vars).

1 \ È necessario includere un nuovo foglio di stile nelle pagine HTML.

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

2 \ Nella tua style.php Includi la tua PHP vars come segue:

<?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 \ Poi in fondo (o dopo aver MENO dichiarazione var) di questa style.php aggiungere tutti i importazioni necessarie come segue :

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

Questo funziona come un orologio.

C'è un articolo è possibile read about CSS Variables with PHP scritto da Chris Coyier.

---

Un'altra non raccomandato alternativa si sta compilando i file meno sul lato client, si potrebbe manualmente compilarli e passare PHP vars nel seguente modo:

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

MENO:

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