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”]的更多相关文章

  1. 如何将自定义的搜索参数便捷的添加到js方式的bootstrap table的参数中

    页面: <div> <form id="exp_form"> 查询参数... <button type="button" oncl ...

  2. JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  3. 【转】JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐(二)

    前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...

  4. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  5. Bootstrap里的文件分别代表什么意思及其引用方法

    关于Bootstrap打包的文件分别代表什么意思,官网也没有给出一个明确的解释,在网上查了一些资料,总价归纳了如下: bootstrap/ <!--主目录--> ├── css/ < ...

  6. 网站功能操作分布引导插件:Intro.js介绍;React里如何使用Intro.js以及如何进行分页导航

    插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...

  7. Uncaught Error: Script error for "popper.js", needed by: bootstrap - require.js

    Uncaught Error: Script error for "popper.js", needed by: bootstrap https://requirejs.org/d ...

  8. JS中的柯里化及精巧的自动柯里化实现

    一.什么是柯里化? 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 C ...

  9. JS中的柯里化(currying) 转载自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

    JS中的柯里化(currying) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpr ...

随机推荐

  1. 创建项目文件(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 按照张同学和董同学的说法,创建项目文件首选是利用可以参照的项目计划模板,如果找不到,那就利用现有的项目文件,实在这些都没有 ...

  2. Vs code配置Go语言环境-Mac

    背景:最近受朋友介绍,学习Go语言.那么开始吧,首先从配置环境开始. 电脑:Mac Air,Vs code已经安装 一.Go下载和安装 下载地址:https://golang.google.cn/dl ...

  3. 如何完成符合ISO 26262要求的基于模型设计(MBD)的测试

    背景介绍 随着汽车行业的迅速发展,汽车的复杂程度不断增加,越来越多的汽车电子控制系统具有与安全相关的功能,因此对ECU的安全要求也越来越高.复杂的软件功能,将会带来大量的软件风险问题,如何保证软件的安 ...

  4. linux下记录入站请求

    将内网机器通过frp映射到公网后,内网主机受到大量ssh爆破攻击,攻击来源为frp的服务端,仅在内网机器上无法追踪到真实的攻击来源的ip.下面记录了在frp服务端监控指定端口的入站数据,找到真正的攻击 ...

  5. 安装选择msi格式还是zip(windows下Nodejs zip版下载安装及环境变量配置)

    安装选择msi格式还是zip((windows下Nodejs zip版下载安装及环境变量配置)) -----以node.js 安装为例: 1,外观对比: ✿ 简单介绍一下node的作用: • node ...

  6. Tomcat高级特性及性能调优

    Tomcat对Https的支持 HTTPS简介 Https,是以安全为目标的Http通道,在Http的基础上通过传输加密和身份认证保证了传输的安全性.HTTPS在HTTP的基础上加入SSL层,HTTP ...

  7. vc mfc listctrl使用虚拟列表 虚拟列表用法

    note 虚拟列表可有效加载大量数据 需要处理listctrl的 LVN_GETDISPINFO 消息 使用虚拟列表 不能 使用 insert的方法插入数据,而是告诉listctrl 当前要显示多少行 ...

  8. 【LeetCode】169. Majority Element 解题报告(Java & Python & C+)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 思路 hashmap统计次数 摩尔投票法 Moore ...

  9. 【LeetCode】173. Binary Search Tree Iterator 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 保存全部节点 只保留左节点 日期 题目地址:http ...

  10. Codeforces Round #327 (Div. 1), problem: (A) Median Smoothing

    http://codeforces.com/problemset/problem/590/A: 在CF时没做出来,当时直接模拟,然后就超时喽. 题意是给你一个0 1串然后首位和末位固定不变,从第二项开 ...