javascript - loop - less to css

Cargar variables en el preprocesador LESS CSS desde el archivo JSON

Question

¿Es posible cargar variables en el preprocesador LESS CSS desde un archivo JSON como puede hacer con Stylus?

Con contenidos del archivo myvars.json

{
    "color1": "#112345",
    "color2": "#667890"
}

En Stylus hago ...

json(''myvars.json'')
body{ background-color: color1; }

¿Es posible hacer esto en MENOS?

Quiero mantener el archivo como JSON, para poder reutilizarlo fácilmente en javascript.

Answer 1

Cuando se usa LESS en el navegador, también existe la opción ''globalVars'' que se puede usar para configurar variables antes de cargar los archivos LESS: http://lesscss.org/usage/#using-less-in-the-browser-options

Answer 2

En less.js puede hacer uso de la interpolación de javascript (usando las marcas de retroceso). Y llame a una función que carga el objeto json con las variables del archivo ... desde donde puede extraer la variable por su clave, algo en esta dirección quizás:

@json_file: myvars.json;

@json: ~`json = function($key) { var request = new XMLHttpRequest(); request.open("GET", "@{json_file}", false); request.send(null); var my_json = JSON.parse(request.responseText); return my_json[$key]; }`;

body {
  background-color: ~`json(''color1'')`;
}

Esto podría no parecer super elegante, pero funciona. Una opción más elegante probablemente sería definir su función de usuario personalizada en el objeto LESS global antes de llamar al script , pero nunca me molesté en jugar con eso, ya que siempre estaba usando el lado del cliente LESS solo en desarrollo.

Otra cosa que puede hacer es cargar el archivo json en javascript (después de llamar el script LESS en el navegador) y usar la función less.modifyVars() para recompilar MENOS con las variables json. Puedes hacer algo en este sentido en tu html (aquí uso JS simple pero es aún más sencillo si usas jQuery.getJSON):

<link rel="stylesheet/less" href="style.less" type="text/css">
<script type="text/javascript">less = { env: "development" };</script>
<script src="http://rawgithub.com/less/less.js/master/dist/less-1.4.1.min.js" ></script>
<script type="text/javascript">
    var request = new XMLHttpRequest();
    request.open("GET", "myvars.json", false);
    request.send(null);
    var my_json = JSON.parse(request.responseText);
    less.modifyVars(my_json);
</script>

y algo como esto en tu archivo de estilo MENOS:

@color1: darkblue; //default value - will get overwritten by .modifyVars()

body {
  background-color: @color1;
}

Otra nota: todos los nombres de variables en MENOS tienen que comenzar con un signo at ( @ ). Sin embargo, las variables json no necesitan hacerlo, porque less.modifyVars() automáticamente antepone las variables con una @ si falta.

Espero que esto te dé algunas ideas. Podría haber mejores maneras de hacerlo ... pero estos dos enfoques funcionaron para mí.

Answer 3

Si no usas MENOS en el navegador pero compilas el CSS, solo publico un plugin truculento para hacer este trabajo.

Puede verse así:

css/myvars.json

{
    "color1": "#112345",
    "color2": "#667890"
}

less/styles.less

@json-import "myvars.json";

body {
  background-color: @color1;
}

gulpfile.js

var gulp = require(''gulp'');
var less = require(''gulp-less'');
var lessJsonImport = require(''gulp-less-json-import'');

gulp.task(''less'', function(){ 
  gulp.src([''./less/**/*.less'', ''!./less/**/_*.less''])
      .pipe(lessJsonImport())
      .pipe(less())
      .pipe(gulp.dest(''./css''));
});