Pasar variables a una hoja de estilos LESS.js

Question

Tengo varias variables (colores hexadecimales) definidas en una base de datos. Necesito pasar estas variables de MySQL a una hoja de estilos LESS.js a través de PHP. ¿Posible?

Si no, ¿algún consejo sobre una manera de hacer algo similar? Las variables de aclarar y oscurecer son la clave.

Answer 1

El mejor enfoque que me viene a la mente es dynamic generate un archivo LESS usando PHP (incluyendo tus vars).

1 \ Deberá incluir una nueva hoja de estilo en sus páginas HTML.

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

2 \ En su style.php incluyen su PHP vars de la siguiente manera:

<?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 \ A continuación, en la parte inferior (o después MENOS declaración var) de esta style.php agrega todos sus importaciones necesarias de la siguiente :

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

Esto funciona como un reloj.

Hay un artículo que puede read about CSS Variables with PHP escrito por Chris Coyier.

---

Otra no se recomienda alternativa que está compilando archivos MENOS en el lado del cliente, que podría manualmente compilarlas y pasar PHP vars haciendo lo siguiente:

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

MENOS:

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