getLessVars

Javascript function to retreive LESS variables.

by Ron Valstar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.4.0/less.min.js"></script>
<html><head>
<style type="text/less">
    
    // less variables
    @myWidth: 200px;
    @myPadding: 5px;
    @myBorderColor: #666;
    
    // add variables as classes to a non-existing id
    #foobar {
        .myWidth { width: @myWidth; }
        .myPadding { width: @myPadding; }
        .myBorderColor { color: @myBorderColor; }
    }
    
    // variables usage
    div {
        width: @myWidth;
        padding: @myPadding;
        border: 2px solid @myBorderColor;
    }
    
</style>
</head><body>
<div>this div uses the following less properties:</div>
</body></html>

JavaScript

// getLessVars :: https://gist.github.com/2948738
/**
 * getLessVars parses your LESS variables to Javascript (provided you make a dummy node in LESS)
 * @param {String} id The CSS-id your variables are listed under.
 * @param {Boolean} [parseNumbers=true] Try to parse units as numbers.
 * @return {Object} A value object containing your LESS variables.
 * @example
 * LESS:
 * 	&#64;myLessVariable: 123px;
 * 	#dummyLessId { width: @myLessVariable; }
 * Javascript:
 * 	getLessVars('dummyLessId');
 * returns:
 * 	{myLessVariable:123}
 */
function getLessVars(id,parseNumbers) {
	var bNumbers = parseNumbers===undefined?true:parseNumbers
		,oLess = {}
		,rgId = /\#[\w-]+/
		,rgKey = /\.([\w-]+)/
		,rgUnit = /[a-z]+$/
		,aUnits = 'em,ex,ch,rem,vw,vh,vmin,cm,mm,in,pt,pc,px,deg,grad,rad,turn,s,ms,Hz,kHz,dpi,dpcm,dppx'.split(',')
		,rgValue = /:\s?(.*)\s?;\s?\}/
		,rgStr = /^'([^']+)'$/
		,sId = '#'+id
		,oStyles = document.styleSheets;
	for (var i=0,l=oStyles.length;i<l;i++) {
		var oRules;
		try{ oRules = oStyles[i].cssRules; }
		catch (e) { continue; }
		if (oRules) {
			for (var j=0,k=oRules.length;j<k;j++) {
				try { var sRule = oRules[j].cssText; }
				catch (e) { continue; }
				var aMatchId = sRule.match(rgId);
				if (aMatchId&&aMatchId[0]==sId) {
					var aKey = sRule.match(rgKey)
						,aVal = sRule.match(rgValue);
					if (aKey&&aVal) {
						var sKey = aKey[1]
							,oVal = aVal[1]
							,aUnit
							,aStr;
						if (bNumbers&&(aUnit=oVal.match(rgUnit))&&aUnits.indexOf(aUnit[0])!==-1) {
							oVal = parseFloat(oVal);
						} else if (aStr=oVal.match(rgStr)) {
							oVal = aStr[1];
						}
						oLess[sKey] = oVal;
					}
				}
			}
		}
	}
	return oLess;
}


// parse less
less.refresh();

// read variables from id #foobar
var oVars = getLessVars('foobar'),
    mPre = document.createElement('pre'),
    sData = "\n";
for (var s in oVars) sData += "\t" + s + ': ' + oVars[s] + "\n";
mPre.innerHTML = sData;
document.body.appendChild(mPre);