Nhận danh sách biến ít hơn bằng cách sử dụng less.js

Question

Tôi đang sử dụng less.js. phía máy khách Có cách nào để có được tất cả các biến từ tập tin của tôi ít hơn. Tôi biết làm thế nào để thay đổi các biến:

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

Nhưng tôi muốn để có được tất cả trong số họ, tương tự (không làm việc):

var variables = less.getVars(); 

Answer 1

Đây sẽ là một câu trả lời độc đáo vì nó có vẻ như dữ liệu này không được hiển thị công khai như một phần của API đối mặt với trình duyệt.

---

tl; dr

• Lưu một bản sao cục bộ của tập tin less.js.

• Thêm định nghĩa hàm này ở đâu đó

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

• Thêm cuộc gọi sau exposeVars(evaldRoot) ngay trước return result trên dòng ~ 2556.

• Bây giờ less.variables chứa tất cả các biến từ tệp của bạn.

Tuyên bố từ chối: Làm điều này không phải là một ý tưởng hay! Sẽ ổn nếu bạn chỉ chơi xung quanh, gỡ lỗi hoặc thử nghiệm một cái gì đó, nhưng không phụ thuộc vào hack này cho bất cứ điều gì nghiêm trọng!

---

Mục đích cơ bản ở đây là để tìm ra điểm trong nguồn nơi .less tập tin được chuyển thành cây cú pháp trừu tượng (hoặc một số cấu trúc hình thức khác).

Nhảy thẳng vào nguồn, tôi tìm thấy lớp ParseTree. Đó là một giả định hợp lý để đoán rằng nó sẽ chứa kết quả phân tích cú pháp tệp ít hơn.

Tôi đã viết một tệp thử nghiệm nhanh và thêm tệp đó vào trình duyệt bằng thẻ thích hợp. Nó trông giống như thế này:

@myvar: red; 
@othervar: 12px; 

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

Tôi đã tải về một bản sao cục bộ của less.js và thêm một breakpoint được bổ sung vào dòng 2556.

Tôi đã có một xô xung quanh trong phạm vi địa phương để xem những gì đã có sẵn và tìm thấy các biến trong một đối tượng được gọi là evaldRoot.

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

Công việc tiếp theo là tìm ra nơi dữ liệu này đi. Dường như biến số evaldRoot được sử dụng để tạo CSS kết quả (điều này có ý nghĩa, vì nó chứa thông tin như biến).

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

Bất cứ điều gì xảy ra, các biến nằm ngoài phạm vi được sử dụng để tạo chuỗi CSS là result.css.

Để hiển thị các biến này, tập lệnh cần sửa đổi nhỏ. Bạn sẽ phải phơi bày các biến công khai bằng cách nào đó. Đây là một ví dụ về việc đó.

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

Điều này có thể được thêm ngay trước câu lệnh trả về với điểm ngắt.

exposeVars(evaldRoot); 
return result; 

Bây giờ các biến sẽ có sẵn trong đối tượng name: value trên đối tượng less toàn cầu.

Bạn thậm chí có thể thay đổi lộ hàm trả về các biến từ một cuộc gọi đến less.getVars(). Giống như đề xuất ban đầu của bạn.

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