Đi qua biến LESS JavaScript

Question

Tôi có một tập tin LESS rằng có một số biến:

@font-size: 100%; 
@label-align: left; 
@field-width: 230px; 
@icon-size: 16px; 
@icon-padding: 8px; 

Trong kịch bản JS của tôi, tôi cần phải biết tổng của một số giá trị ban đầu người dùng đã thiết lập trong file LESS. Giá trị css được tính toán có thể thay đổi theo kích thước vùng chứa gốc. Những giá trị này cũng thay đổi khi tải đầu tiên, tùy thuộc vào kích thước cửa sổ.

Một số yếu tố cũng được tạo động vì vậy sẽ rất khó để lấy đúng giá trị ban đầu trong JS vì tôi sẽ phải khai báo biến tại các điểm khác nhau trong mã và trong các phạm vi khác nhau.

Một ý tưởng tôi có là khai báo đối tượng "phạm vi cao" với một số biến giả và gán giá trị cho biến ngay sau khi tôi thêm phần tử vào DOM nhưng hóa ra là lộn xộn và dư thừa.

Sau nhiều giờ, tôi đã nghĩ ra ý tưởng này hiện đang hoạt động, khá đáng sợ nhưng hoạt động.

LESS:

.less-vars { 
    width: @field-width + @error-width + @icon-size + (@icon-padding * 2); 
} 

JS:

var less_vars = $('<div class="less-vars" />').hide().appendTo('body').width(); 
$('.less-vars').remove(); 

Có cách nào khác tôi có thể làm điều này?

Answer 1

Tôi vừa viết một đoạn nhỏ Javascript đọc trực tiếp từ document.styleSheets để nó không yêu cầu thêm bất kỳ HTML nào. Tôi đã chỉ thử nghiệm nó trong Chrome.

Trong tôi ít Tôi có:

#less { 
    .thumbsWidth { width: @thumbsWidth; } 
    .thumbsTop { width: @thumbsTop; } 
} 

My Javascript đọc:

var oLess = {}; 
$.each(document.styleSheets,function(i,sheet){ 
    $.each(sheet.cssRules,function(i,rule){ 
     var sRule = rule.cssText; 
     if (sRule.substr(0,5)=="#less") { 
      var aKey = sRule.match(/\.(\w+)/); 
      var aVal = sRule.match(/(\d+)/); 
      if (aKey&&aVal) oLess[aKey[1]] = aVal[0]<<0; 
     } 
    }); 
}); 
console.log(oLess); 

Mà làm cho oLess:

{ 
    thumbsWidth: 123, 
    thumbsTop: 456 
} 

Hiện nay điều này chỉ đọc các giá trị điểm ảnh nhưng bạn có thể dễ dàng sửa đổi nó để đọc bất cứ điều gì.

-update-

Dưới đây là một fiddle: http://jsfiddle.net/Sjeiti/VHQ8x/ (với một ý chính trong các nguồn https://gist.github.com/2948738)