Ottieni meno elenchi di variabili usando less.js

Question

Sto usando less.js. lato client. C'è un modo per ottenere tutte le variabili dal mio file meno. Io so come modificare le variabili:

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

Ma io voglio ottenere tutti loro, come (non funzionano):

var variables = less.getVars(); 

Answer 1

Questo sta per essere una risposta non convenzionale come sembra che questi dati non sono esposti pubblicamente come parte dell'API del browser.

---

tl; dr

• Salva una copia locale del file less.js.

• Aggiungi questa definizione di funzione da qualche parte

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

• Aggiungere la seguente chiamata exposeVars(evaldRoot) poco prima return result on line ~ 2556.

• Ora less.variables contiene tutte le variabili del file.

Disclaimer: Fare questa non è una buona idea! Va bene se stai solo giocando, eseguendo il debug o testando qualcosa, ma non fare affidamento su questo hack per nulla di serio!

---

L'obiettivo fondamentale era quello di trovare il punto nella sorgente in cui i file .less si trasformano in alberi di sintassi astratta (o qualche altra struttura formale).

Saltando direttamente nella sorgente, ho trovato una classe ParseTree. È ragionevole supporre che conterrà il risultato dell'analisi del file meno.

Ho scritto un file di test rapido e l'ho aggiunto al browser con il tag appropriato. Ecco come si presenta:

@myvar: red; 
@othervar: 12px; 

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

ho scaricato una copia locale del less.js e ha aggiunto un punto di interruzione alla linea del 2556.

ho avuto un poke in giro per il campo di applicazione locale per vedere che cosa era disponibile e ha trovato le variabili in un oggetto chiamato evaldRoot.

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

Il lavoro successivo era capire dove vanno questi dati. Sembra che la variabile evaldRoot sia utilizzata per generare il CSS risultante (che avrebbe senso, dato che contiene informazioni come variabili).

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

Qualunque cosa accada, le variabili va fuori del campo di applicazione dopo che è stato utilizzato per generare una serie di CSS come result.css.

Per esporre queste variabili, lo script necessita di una piccola modifica. Dovrai esporre le variabili pubblicamente in qualche modo. Ecco un esempio di come farlo.

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

Questo può essere aggiunto appena prima dell'istruzione di ritorno con il punto di interruzione.

exposeVars(evaldRoot); 
return result; 

Ora le variabili saranno disponibili in un oggetto name: value sul less oggetto globale.

Si potrebbe anche modificare la funzione esporre a restituire le variabili da una chiamata a less.getVars(). Proprio come il tuo suggerimento iniziale.

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