Question

我正在开发一个项目，所有较少的变量都由Maven编译为Css。 less文件中有很多颜色变量。我想从javascript访问这些颜色变量。在这种情况下，我可以定义颜色一次，并在css和javascript中使用它。

有人可以帮我介绍一下Maven插件或方法来读取Javascript中较少的变量吗？

Answer 1

以下是解释如何在JavaScript中访问较少变量的代码段

＆＃13;

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

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/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>

＆＃13;

您也可以参考https://gist.github.com/Sjeiti/2948738

Answer 2

也可以在客户端上使用Less。阅读他们的文档：

客户端使用   在浏览器中使用less.js非常适合开发，但不建议用于生产   客户端是最简单的入门方式，适合使用Less进行开发，但在生产中，当性能和可靠性很重要时，我们建议使用node.js或许多第三方工具之一进行预编译。

首先，将.less样式表与rel属性设置为“stylesheet / less”链接：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下来，下载less.js并将其包含在网页元素的标记中：

提示

确保在脚本之前包含样式表。   链接多个.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，混合或名称空间都无法访问。   由于浏览器加载外部资源的原始策略相同，因此需要启用CORS

减少CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

可以在less data或通过less.Parser或各种API中找到已定义的变量。

对于某些Parser样本，请参阅：get variables values

如何在Javascript中读取较少的变量？

2 个答案: