首页 > 代码库 > 用Less 的 js方式替代 bootStrap 里 [class*=”span”]
用Less 的 js方式替代 bootStrap 里 [class*=”span”]
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 控制了。看起来不是很直观,加个注释声明了一下。
用Less 的 js方式替代 bootStrap 里 [class*=”span”]
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。