less.js - 在解析器的回調中獲取變量值

我正在使用less.js（1.3.0）在客戶端解析更少的CSS。在解析器的回調中，我想獲取每個變量的值。我嘗試了以下沒有成功。less.js - 在解析器的回調中獲取變量值

var data = "@colour: red; #example { background-color: @colour; }", 

parser = new less.Parser({}); 
parser.parse(data, function (error, root) { 
    console.log(root.toCSS()); 

    var varsDef = root.variables(); 
    for (k in varsDef) { 
    console.log(varsDef[k]); 

    // how to get the value for the var? 
     //not working 
    console.log(varsDef[k].eval()); 
     //not working 
    console.log(varsDef[k].toCSS()); 
     //is an object but looking for a string value 
    console.log(varsDef[k].value); 
     //returns an empty string 
    console.log(varsDef[k].value.toCSS());     
    } 
});

eval（）和toCSS（）都不給我任何結果。我不理解更少的解析器的內部工作。每個變量對象都有一個變量屬性varsDef [k] .value，它是一個對象本身。但我只需要變量的字符串值。

有誰知道如何獲得變量的值作爲一個字符串？

來源

2012-08-06 Philipp

varsDef[k].value.toCSS()

值應該是

varsDef[k].name

應變量名

varsDef[k].toCSS()

回報什麼，因爲它是一個變量 - 在CSS中的變量不輸出。

來源

2012-08-06 14:00:22

恐怕不行。 'varsDef [k] .value.toCSS（） '返回空字符串而不是「紅色」。 – Philipp 2012-08-07 07:04:21

@luke，通過向Parser構造函數提供空對象，即'（new less.Parser（{}，{contents：{}}，我能夠在客戶端less.js v2.1'中獲得'Ruleset'對象。 }}，{}））。parse（lessMarkup，function（err，ruleset）{}）'。問題是'lessMarkup'中有'@ import'語句，解析器失敗 – 2015-01-01 18:06:58

我就遇到了這個問題，最近，它咬了我，因爲喜歡你，我已經運行像很喜歡你在上面，但對沿

@redColor: #900; // responds to .toCSS() 
@fooColor: desaturate(@redColor, 20%); // both of these error out 
@barColor: lighten(@fooColor, 10%); // when calling .toCSS()

線條複雜的變量寫的代碼相同的本能

你會得到這個嵌套tree.Value爲@barColor這是這個嵌套表示的分析樹，所以它會說，無益地barcolor: {[value: {value: [{lighten: {...}}]}]}或其他。我的解析-fu是非常糟糕的，因爲我總是會在某個點上結束一些對象，而這些對象不再響應我調用tree.toCSS，所以我放棄了這個路線。

相反，我所做的就是用產生的進口規則和廢話規則廢話.LESS文件，像這樣

@import "varfile.less"; 

.foo { 
    redColor: @redColor; 
    fooColor: @fooColor; 
    barColor: @barColor; 
}

不太會愉快地分析這樣的文件

，它並不關心redColor是一個真正的CSS屬性或不是，它只是忽略它，並做所有的替代品，它必須盡職盡責。所以你最終會得到一個簡單的規則css文件，你可以很容易地解析它，因爲它非常直截了當。它看起來像這樣：

.foo{ 
    redColor: #990000; 
    fooColor: #8a0f0f; 
    barColor: #b81414; 
}

這是，巧合的是，最簡單的文件來分析。它實際上乞求變成json或你有什麼。授予，這裏的路徑是非常滑稽的。我懷疑這是因爲沒有規則的變量仍然是公平的遊戲，在規則本身中被修改，但我可以合理化。

假設您只想提取少量變量的最終值，而不是少量變量的語義值，這非常方便。如果你想要語義，最好解析實際的少文件。

我最終在節點中寫了這個，在我過去了自己的反對意見之後，它感覺到了多麼狡猾，它工作得很好，給我一個json字典和我的項目變量。你可以看一下，它在github上的nsfmc/less-extractor這基本上需要一個基本的配置文件，然後寫入標準輸出一個JSON字典。這是不雅的，但它完全有效，即使它有點hackish。

你最初的問題是關於如何完全做到客戶端，所以看起來會排除github項目，但這個想法非常相似：你希望能夠訪問原來較少的文件作爲xhr的一部分請求，解析它以獲取變量名稱，構建一個較少的字符串，解析該字符串，然後剩下的代碼只是構建字符串並運行磨機解析。

希望能幫到你！

來源

2014-04-04 16:00:14 Marcos

-2

我也遇到過較少解析器的問題;這樣做是因爲遞歸檢查樹節點而變得荒謬可笑。

如果您不想將實際值與生成的CSS相比較（根據上述答案），最好的方法是手動解析文件的文本。

該函數爲給定少文件中的每個變量返回一個鍵/值對。它不會工作，如果LESS文件每行有多個值，你可以使用正則表達式更好。我用它來分析引導程序的變量文件，這很好地工作。

getLessVars = (lessStr) -> 
    lines = lessStr.split('\n') 
    lessVars = {} 
    for line in lines 
    if line.indexOf('@') is 0 
     keyVar = line.split(';')[0].split(':') 
     lessVars[keyVar[0]] = keyVar[1].trim() 
    return lessVars

來源

2014-07-09 08:14:55 Hitchcott

less.js - 在解析器的回調中獲取變量值

回答

相關問題