在前端开发中，LESS 是一种非常强大的样式预处理语言，可以让我们更方便的管理和维护 CSS 样式，提高开发效率。但是，使用 LESS 中的 @arguments 属性时，会出现在 IE9 以下版本的浏览器不兼容的情况。本文将介绍如何解决这个问题。
问题描述
在 LESS 中，@arguments 是一个非常实用的属性，它可以让我们在 mixin 中传递不定参数。例如，我们可以定义一个 mixin，用来设置多个 CSS 属性：
.mixin(@args...) {
background: @args[1];
font-size: @args[2];
color: @args[3];
}然后在使用时，可以传入不定数量的参数：
.class {
.mixin(#ccc, 14px, #333);
}这样就可以快速的设置多个 CSS 属性。
但是，该方法在 IE9 以下版本的浏览器中会出现兼容性问题。具体表现为，使用了 @arguments 属性的 mixin 在 IE9 及以下版本的浏览器中不能被正确解析。
解决方法
为了解决这个问题，我们需要针对不同浏览器，采用不同的解决方案。
IE9 及以下版本
对于 IE9 及以下版本的浏览器，我们可以使用 LESS 提供的一个函数 extraction() 来解决这个问题。
该函数可以将 @arguments 转换成一个参数数组，然后在 mixin 中使用该数组即可。
例如：
.mixin() {
@args: extraction(@arguments);
background: @args[1];
font-size: @args[2];
color: @args[3];
}这样，在 IE9 及以下版本的浏览器中，就可以正常使用该 mixin 了。
其他浏览器
对于其他浏览器，可以采用一个更加简单的方法。我们可以将 @arguments 转换成一个无序列表参数，然后在 mixin 中使用该列表参数即可。
例如：
.mixin(@args; ...) {
background: extract(@args, 1);
font-size: extract(@args, 2);
color: extract(@args, 3);
}这样，在其他浏览器中，就可以正常使用该 mixin 了。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- -------- - ------ ----------------------- ----------- --------- ---------- --------- ------ --------- - ------ - ------------ ----- ------ -
-- -------------------- ---- ------- ------------- ---- - ----------- -------------- --- ---------- -------------- --- ------ -------------- --- - ------ - ------------ ----- ------ -
总结
通过上述的介绍，我们学习了如何解决 LESS 中 @arguments 对 IE9 及以下版本的浏览器不兼容的问题。具体来说，我们可以使用 extraction() 函数或者将 @arguments 转换为一个无序列表参数来解决这个问题。在实际开发中，我们应该根据具体情况来选择不同的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d27fe48841e98949e17fb