javascript - sourcemap - less tutorial

Obtener menos lista de variables usando less.js

Question

Estoy usando less.js. del lado del cliente ¿Hay una manera de obtener todas las variables de mi archivo menos. Sé cómo modificar las variables:

less.modifyVars({
  "@var": "#fff"
});

Pero quiero obtenerlos todos, como (no funciona):

var variables = less.getVars();

Answer 1

Esta será una respuesta poco convencional ya que parece que estos datos no se exponen públicamente como parte de la API que enfrenta el navegador.

tl; dr

• Guarde una copia local del archivo less.js

• Añadir esta definición de función en algún lugar

  function exposeVars(root) {
       var r=root._variables,n=Object.keys(r),m={}
       for(var k of n){m[k]=r[k].value}
           less.variables = m;
  }

• Agregue la siguiente llamada exposeVars(evaldRoot) justo antes de return result en la línea ~ 2556.

• Ahora less.variables contiene todas las variables de su archivo.

Descargo de responsabilidad : hacer esto no es una buena idea! Está bien si solo estás jugando, depurando o probando algo, ¡pero no dependas de este truco para nada serio!

El objetivo básico aquí era encontrar el punto en la fuente donde los archivos .less se convierten en árboles sintácticos abstractos (o en alguna otra estructura formal).

Saltando directamente a la fuente, encontré una clase de ParseTree . Es razonable suponer que contendrá el resultado de analizar el archivo less.

Escribí un archivo de prueba rápida y lo agregué al navegador con la etiqueta adecuada. Se parece a esto:

@myvar: red;
@othervar: 12px;

body {
  padding: @othervar;
  background: @myvar;
}

He descargado una copia local de less.js y less.js agregado un punto de interrupción agregado a la línea 2556.

Tuve un empujón en el ámbito local para ver qué estaba disponible y encontré las variables en un objeto llamado evaldRoot .

evaldRoot = {
  _variables: {
    @myvar: {
      name: ''@myvar'',
      value: Color
    },
    @othervar: {
      name: ''@othervar'',
      value: Dimension
    }
  }
}

El siguiente trabajo fue averiguar dónde van estos datos. Parece que la variable evaldRoot se utiliza para generar el CSS resultante (lo que tendría sentido, ya que contiene información como variables).

if (options.sourceMap) {
  sourceMapBuilder = new SourceMapBuilder(options.sourceMap);
  result.css = sourceMapBuilder.toCSS(evaldRoot, toCSSOptions, this.imports);
} else {
  result.css = evaldRoot.toCSS(toCSSOptions);
}

Pase lo que pase, las variables quedan fuera del alcance después de usarse para generar una cadena de CSS como result.css .

Para exponer estas variables, el script necesita una pequeña modificación. Tendrás que exponer las variables públicamente de alguna manera. Aquí hay un ejemplo de hacer eso.

function exposeVars(root) {
  var varNames = Object.keys(root._variables);

  var variables = varNames.reduce(function(varMap, varName) {
    varMap[varName] = root._variables[varName].value;
  }, {});

  less.variables = variables;
}

Esto se puede agregar justo antes de la declaración de retorno con el punto de interrupción.

exposeVars(evaldRoot);
return result;

Ahora las variables estarán disponibles en un objeto name: value en el objeto global less .

Incluso podría modificar la función exponer para devolver las variables de una llamada a less.getVars() . Al igual que su sugerencia inicial.

function exposeVars(root) {
  // ...
  less.getVars = function() {
    return variables;
  };
}