如何在 Javascript 中读取更少的变量？答案

【问题标题】：How to read less variables in Javascript?如何在 Javascript 中读取更少的变量？
【发布时间】：2017-08-03 07:17:11
【问题描述】：

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

谁能帮我介绍一个 Maven 插件或一种在 Javascript 中读取较少变量的方法？

【问题讨论】：

【解决方案1】：

这是一段代码 sn-p 解释如何在 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);

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

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

【讨论】：

感谢您的回答，但我正在做一个大项目，在呈现 HTML 之前，所有较少的文件都编译为 CSS。所以我无法访问 HTML 中的较少变量。我正在寻找一种通过 Maven 读取较少文件并自动生成 json 文件的解决方案，然后也许我可以从 javascript 中读取它。我不知道这是否是一个好的解决方案，或者有更简单的方法来做到这一点。你怎么看？

【解决方案2】：

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

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

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

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

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

提示

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

减少 CDN

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

定义的变量可以在lessdata或槽less.Parser或各种API中找到。

对于一些Parser 示例，请参阅：get variables values

【讨论】：