码迷,mamicode.com
首页 > Web开发 > 详细

用Less 的 js方式替代 bootStrap 里 [class*=”span”]

时间:2014-12-09 13:45:30      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   使用   sp   for   java   

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

标签:style   blog   io   ar   color   使用   sp   for   java   

原文地址:http://www.cnblogs.com/Megasu/p/4152988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!