कम.जेएस

Question

का उपयोग कर कम चर सूची प्राप्त करें मैं क्लाइंट-साइड less.js. का उपयोग कर रहा हूं। क्या मेरी कम फ़ाइल से सभी चर प्राप्त करने का कोई तरीका है। मुझे पता है कि चर को संशोधित करने:

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

लेकिन मैं उन सभी को प्राप्त करने के लिए, (काम नहीं करते) की तरह हैं:

var variables = less.getVars(); 

Answer 1

इस के रूप में ऐसा लगता है कि एक अपरंपरागत जवाब होने जा रहा है इस डेटा को ब्राउज़र के एपीआई के हिस्से के रूप में सार्वजनिक रूप से उजागर नहीं किया गया है।

---

tl; डॉ

• सहेजें less.js फ़ाइल की एक स्थानीय प्रति।

• जोड़े इस समारोह परिभाषा कहीं

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

• सिर्फ return result लाइन ~ 2556 पर करने से पहले निम्न कॉल exposeVars(evaldRoot) जोड़ें।

• अब less.variables आपकी फ़ाइल से सभी चर शामिल हैं।

अस्वीकरण: ऐसा करना एक अच्छा विचार नहीं है! यह ठीक है अगर आप बस खेल रहे हैं, डीबगिंग या कुछ परीक्षण कर रहे हैं, लेकिन किसी भी गंभीर के लिए इस हैक पर निर्भर न हों!

---

यहाँ मूल उद्देश्य स्रोत जहां .less फ़ाइलें सार वाक्य रचना के पेड़ (या कुछ अन्य औपचारिक संरचना) में बदल गया है में बिंदु को खोजने के लिए किया गया था।

सीधे स्रोत में कूदते हुए, मुझे ParseTree कक्षा मिली। यह अनुमान लगाने के लिए एक उचित धारणा है कि इसमें कम फ़ाइल को पार्स करने का नतीजा होगा।

मैंने एक त्वरित परीक्षण फ़ाइल लिखी और उचित टैग के साथ ब्राउज़र में इसे जोड़ा। यह इस तरह दिखता है:

@myvar: red; 
@othervar: 12px; 

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

मैं less.js की स्थानीय प्रतिलिपि डाउनलोड किया है और एक ब्रेकपाइंट 2556.

मैं स्थानीय दायरे में चारों ओर एक प्रहार को देखने के लिए क्या उपलब्ध था और पाया था लाइन को जोड़ा जोड़ दिया है evaldRoot नामक किसी ऑब्जेक्ट में चर।

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

अगला काम यह पता लगाने के लिए था कि यह डेटा कहां जाता है। ऐसा लगता है कि evaldRoot वैरिएबल का उपयोग परिणामस्वरूप सीएसएस उत्पन्न करने के लिए किया जाता है (जो समझ में आता है, क्योंकि इसमें चर के रूप में जानकारी होती है)।

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

जो कुछ भी होता है, चर के बाद यह result.css के रूप में सीएसएस के एक स्ट्रिंग उत्पन्न करने के लिए प्रयोग किया जाता है क्षेत्र से बाहर चला जाता है।

इन चरों का पर्दाफाश करने के लिए, स्क्रिप्ट को एक छोटा संशोधन की आवश्यकता है। आपको किसी भी तरह सार्वजनिक रूप से चर का पर्दाफाश करना होगा। ऐसा करने का एक उदाहरण यहां दिया गया है।

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

यह सिर्फ ब्रेकप्वाइंट साथ वापसी कथन से पहले जोड़ा जा सकता है।

exposeVars(evaldRoot); 
return result; 

अब चर वैश्विक less वस्तु पर एक name: value वस्तु में उपलब्ध हो जाएगा।

तुम भी less.getVars() के लिए एक कॉल से चर वापस जाने के लिए बेनकाब समारोह को संशोधित कर सकता है। बस अपने शुरुआती सुझाव की तरह।

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