傳遞LESS變量的JavaScript

我有了一些變量LESS文件：傳遞LESS變量的JavaScript

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

在我的JS腳本，我需要知道用戶已經在LESS文件中設置一些初始值的總和。計算出的css值可能會根據父容器大小而改變。這些值也會在第一次加載時發生變化，具體取決於窗口大小。

一些元素也是動態創建的，所以它很難在JS中獲取正確的初始值，因爲我必須在代碼中和不同範圍內的不同位置聲明變量。

我想到的一個想法是用一些虛擬變量聲明一個「高範圍」對象，並在將元素附加到DOM後立即將該值賦給該變量，但事實證明這是混亂和冗餘的。

很多小時後，我想出了這個想法，目前的作品，有點哈克，但工程。

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

是否有其他方法可以讓我做到這一點？

來源

2012-04-28 elclanrs

我剛剛寫了一小段Javascript，直接從document.styleSheets中讀取它，因此它不需要任何額外的HTML。我只在Chrome中測試過它。

在我少，我有：

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

我的JavaScript寫着：

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

這使得oLess：

{ 
    thumbsWidth: 123, 
    thumbsTop: 456 
}

目前只讀取像素值，但你可以很容易地修改它來讀出任何東西。

-update-

這裏有一個小提琴：http://jsfiddle.net/Sjeiti/VHQ8x/（在資源https://gist.github.com/2948738梗概）

來源

2012-06-01 10:19:01 Sjeiti

注：解決[IE漏洞955703（https://connect.microsoft.com/IE/ feedback/details/955703）你必須在'try/catch-Block'中包裝'sRule = oRules [j] .cssText'。雖然這是在你的要點正確實施它不在小提琴。 – Aides 2016-08-22 09:35:28

傳遞LESS變量的JavaScript

回答

相關問題