less.js - nhận các giá trị biến bên trong hàm gọi lại của trình phân tích cú pháp

Question

Tôi đang sử dụng less.js (1.3.0) để phân tích cú pháp less thành css ở phía máy khách. Bên trong hàm gọi lại của trình phân tích cú pháp, tôi muốn nhận giá trị cho mỗi biến. tôi đã thử những điều sau mà không thành công.

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

Cả eval() cũng không phải là toCSS() đã cho tôi bất kỳ kết quả. Tôi không hiểu các hoạt động bên trong của trình phân tích cú pháp nhỏ hơn. Mỗi đối tượng biến có một thuộc tính biến varsDef [k] .value là một đối tượng. Nhưng tôi chỉ cần giá trị chuỗi của biến.

Có ai biết cách nhận các giá trị của biến dưới dạng chuỗi không?

Answer 1

varsDef[k].value.toCSS() 

nên giá trị

varsDef[k].name 

nên là tên biến

varsDef[k].toCSS() 

lợi gì bởi vì nó là một biến - trong các biến CSS không ra.

Answer 2

tôi chạy vào vấn đề này thời gian gần đây và nó cắn tôi bởi vì, như bạn, tôi đã có bản năng cùng chạy một cái gì đó như rất giống với mã bạn đã viết ở trên nhưng đối với biến phức tạp dọc theo dòng của

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

bạn sẽ có được lồng nhau này tree.Value cho @barColor đó là đại diện lồng nhau của cây phân tích cú pháp, do đó, nó sẽ nói, vô ích rằng barcolor: {[value: {value: [{lighten: {...}}]}]} hoặc somesuch. phân tích-fu của tôi là khá xấu vì tôi sẽ luôn luôn kết thúc với một số đối tượng tại một số điểm mà sẽ không còn đáp ứng với tôi gọi tree.toCSS vào nó, vì vậy tôi đã lên trên con đường đó.

Thay vào đó, những gì tôi đã làm được tạo ra một tập tin .less vô nghĩa với một quy tắc nhập khẩu và một quy tắc vô nghĩa, như vậy

@import "varfile.less"; 

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

ít hạnh phúc sẽ phân tích một tập tin như vậy, nó không quan tâm nếu redColor là một tài sản css thực sự hay không, nó chỉ bỏ qua nó và làm tất cả các thay thế mà nó phải dutifully. Và vì vậy bạn thực sự kết thúc với một tệp css quy tắc duy nhất mà bạn có thể dễ dàng phân tích cú pháp vì nó được đánh dấu rất đơn giản. nó trông như thế này:

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

đây là, tình cờ, tập tin đơn giản nhất để phân tích. nó thực tế cầu xin được biến thành json hoặc những gì có bạn. được cấp, con đường đến đây là khá hài hước. tôi nghi ngờ đó là bởi vì một biến mà không có quy tắc vẫn là trò chơi công bằng để được sửa đổi trong chính quy tắc, nhưng tôi chỉ có thể hợp lý hoá điều đó.

giả sử bạn chỉ muốn trích xuất các giá trị cuối cùng của ít vars hơn chứ không phải giá trị ngữ nghĩa của ít vars của bạn, nó khá tiện dụng. nếu bạn muốn ngữ nghĩa, có vẻ tốt hơn khi chỉ phân tích cú pháp tệp thực sự ít hơn.

tôi đã kết thúc bằng văn bản này trong nút và sau khi tôi đã vượt qua phản đối của riêng tôi để cảm thấy tinh ranh như thế nào, nó hoạt động khá tốt và cho tôi một dict json với các biến của dự án của tôi. bạn có thể có một cái nhìn, nó trên github tại nsfmc/less-extractor mà về cơ bản có một tập tin cấu hình cơ bản và sau đó viết để stdout một dict json. nó không phù hợp, nhưng nó hoàn toàn hoạt động, ngay cả khi nó hơi khó hiểu.

câu hỏi ban đầu của bạn được hỏi về việc thực hiện hoàn toàn phía máy khách này, do đó dường như loại trừ dự án github, nhưng ý tưởng rất giống: bạn muốn có thể truy cập tệp gốc ban đầu như một phần của một số xhr yêu cầu, phân tích cú pháp để lấy tên biến, xây dựng một chuỗi nhỏ hơn, phân tích cú pháp đó, và sau đó phần còn lại của mã chỉ là xây dựng chuỗi và chạy phân tích cú pháp của nhà máy.

hy vọng rằng sẽ giúp bạn!

Answer 3

Tôi cũng đã gặp vấn đề với các phân tích cú pháp ít quá; làm theo cách đó đã trở nên vô lý với việc kiểm tra đệ quy các nút cây.

Nếu bạn wan't giá trị thực tế như trái ngược với CSS được tạo ra (theo các câu trả lời ở trên), cách tốt nhất là để có thể tự phân tích văn bản của tập tin.

Hàm này trả về một cặp khóa/giá trị cho mỗi người trong số các biến trong một tập tin ít nhất định. Nó sẽ không hoạt động nếu tệp LESS có nhiều giá trị trên mỗi dòng, bạn có thể làm cho nó tốt hơn với regex. Tôi đã sử dụng nó để phân tích cú pháp các tệp biến của bootstrap, nó hoạt động độc đáo.

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