用Less 的 js方式替代 bootStrap 里 [class*=”span”]
浏览数：186 /
时间：2015年06月09日
Bootstrap 里的 grid system 里面 (源代码) 有这么一段，
[class*="span"] {
float: left;
margin-left: @gridGutterWidth;
}
用 RECESS 去跑会看到提示：
Universal selectors should be avoided。这个既可以说是 selector 的问题，也可以说是 RECESS 的问题，但可以在运行的时候加个参数忽略掉。自己去写扩展时也会写到类似的规则，比如需要兼容某浏览器，如果不这样写，就会需要像Bootstrap-IE6 那样写
.span1, .span2, .span3, .span4, .span5, .span6,
.span7, .span8, .span9, .span10, .span11, .span12 {
float: left;
display: inline;
}
但这样太丑陋僵化了，而且经不起变化，当我使用 16 栅格或者其它非 12 栅格时，就非常被动。
如果不使用 [attr*=val]，不知道 LESS 是否有现成的东西来简化。我设想会不会有类似于".span" + [1..@{gridColumns}] 的特性支持。嗯，是有点过于美好了。
但是 LESS 支持运行 JavaScript，这里没有太复杂的运算，只是字符串迭代拼接，感觉可行，于是有了下面这个。
// Modify this for custom colors, font-sizes, etc
@import "variables.less";
// equals [class*="span"]
(~`(function(pf,c){var a=[];while(c>0){a.push(pf+c);c--;}return a.join(‘,‘);})(‘.span‘,parseInt("@{gridColumns}"))`) {
float: left;
margin: 0 @gridGutterWidth 0 0;
}
//Js如下：
(function(pf,c){
var a=[];
while(c>0){
a.push(pf+c);
c--;
}
return a.join(‘,‘);
})(‘.span‘,parseInt("@{gridColumns}"))
由于只有一行，尽量简化了。pf 是前缀 prefix 的意思，c 是迭代项，入参值为parseInt("@{gridColumns}")，这样变化就由 variables.less 控制了。看起来不是很直观，加个注释声明了一下。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
