前言
首先阅读本文之前建议先看一下Bootstrap基础以及Less简介,不然你不会知道我在云什么.因为最近打算用Bootstrap+Less进行开发,但是Less虽然有一些资料,不过大都是Example类型的,感觉比较抽象更像是API,在网上又找不到比较好的解说,所以打算自己写点.
对Bootstrap和Less有兴趣的可以看一下官网(中文):http://www.bootcss.com/和http://www.bootcss.com/p/lesscss/.
正文
在Github上维护的Bootstrap项目就是基于Less的,而且作为目前来讲最优秀的前端CSS框架Bootstrap的功底也相当不错.所以直接看Less在Bootstrap中是如何实现的就能比较好的了解了.这里强调一点就是不管我们怎么看Less,最后是为了写出自己的东西,所以一切都是灵活的.
从https://github.com/twbs/bootstrap上下载到Bootstrap的源代码,这里面有一个Less文件夹,我们研究的重心就是这里了.现在还缺少一个Less的编译环境,可以用Grunt或者Nodejs,这里我选择一个图形界面软件koala.
Bootstrap源码包含了预先编译的CSS、JavaScript和图标字体文件，并且还有LESS、JavaScript和文档的源码。具体来说，主要文件组织结构如下：
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
├── docs-assets/
├── examples/
└── *.html
less/、js/ 和 fonts/ 分别包含了CSS、JS和字体图标的源码。dist/ 目录包含了上面所说的预编译Bootstrap包内的所有文件。docs-assets/、examples/ 和所有 *.html 文件是文档的源码文件。除了前面提到的这些文件，还包含package定义文件、许可证文件等。
我们在页面上使用的时候,其实还是引入的CSS文件,只不过它是通过.less文件编译过来的,有点类似java文件和class文件.打开Less文件夹,我们发现是好多Less文件和一个mixins文件夹.这里我们先不研究每个文件的具体内容,我们就以一个典型的组件如何实现的去研究它的过程.这里我选择的是一个导航栏,所以新建一个页面,引入通过Less编译好的文件,然后逐步上溯CSS样式.
(1) 在Less文件夹外新建一个index.html文件,内容是标准的Bootstrap空白页即可,然后写上一个简单的导航栏,具体代码可以参照Bootstrap官网上的导航栏.先上代码:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html> 上面代码看个大概即可,一会还要逐步分析.这里有几点要声明的,第一就是通过Koala将less/bootstrap.less编译成css/bootstrap.css,就编译这一个文件即可,它是Bootstrap所有样式的一个入口.然后我们在页面中就要引入这个编译后的CSS文件,通过不要关闭你的Koala它会继续监听这个文件,实时更新.做好上面这些之后,从Bootstrap官网找一段导航栏NavBar的代码放进入,页面生成的效果如下:
(2) 分析less的文件组织结构
可以看到less文件夹内和它里面mixins文件夹内都有许多less文件,mixins是less的功能中的混入,以此命名说明其中的less大多数功能代码.在Bootstrap中我们要研究的文件是:less文件夹中的bootstrap.less(所有样式的对外接口),variables.less(存储所有的less变量),以及带有nav或者navbar字样的less文件.目前能想到的和导航栏有关的大概就是这样,然后开始先看一下Bootstrap.less.
如果对所有的less的结构和作用不清楚,一定要看一下bootstrap.less,这里面对less文件的一个组织结构基本上可以算作是标准了,我在注释里加了中文解释,下面就是代码:
// Core variables and mixins(最开始引入所有的变量,以及混入规则,这两个应该是各个less的基础.按照less官网说不需要提前定义,less支持按需加载就是需要的时候它自己去找,不过还是建议先加载进来.)
// 这里mixins.less中内容和bootstrap.less类似,没有实际代码,全是@import引入mixins文件夹的内容.
@import "variables.less";
@import "mixins.less";
// Reset and dependencies
// 这3个less,第一个是重置基本样式,第二个是针对打印机打印时的样式设置,第三个是图标.也就是说这3个也是基础的支撑文件.
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";
// Core CSS
// 什么叫core,就是核心的东西,这里面的一些脚手架,栅格,表格,表单,按钮,这些都是基础的样式,也是Bootstrap展示的核心.
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components
// 组件就是一些网页常见的组成部分,它们可能在一个网站中频繁出现,所以将它们做成组件的形式方便你拿来就用.比如导航,下拉,分页,提示等等...
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";
// Components w/ JavaScript
// 一些好的效果需要JS支持,JS又需要对CSS样式进行操作,这些less就是为了支持JS插件的
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";
// Utility classes
// 所谓的Utility就是公用的,有效用的.看utilities可以发现其中定义了浮动清除,显示隐藏等基本几个样式,看起来就像是从mixins.less中提取出来的一样.
@import "utilities.less";
@import "responsive-utilities.less";根据bootstrap.less的代码可以清晰的看出其中通过less进行编码的文件结构,一共就是几类东西:变量和规则,全局重定义,基础核心(比如table和form等,在原生基础上进行了扩展),常用组件,支持JS的.
(3) 在相关的文件中寻找对应
清楚了文件的组织结构,然后开始从后往前递推,看样式是如何生成的.这时看之前写好的index.html中代码,导航栏整体被包裹在一个nav标签,它的第一个样式是.navbar,Bootstrap中定义navbar是导航栏的基础样式.在页面上通过Chrome的F12进行样式查看.最终通过.navbar这个类被应用的样式如下:
@media (min-width: 768px)
.navbar {
border-radius: 4px;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
} 第一个是因为媒体设备判断当前页面宽度,然后添加了border-radius.后面是通过.navbar添加了position和min-height还有margin-bottom和border.然后通过这些开始寻找navbar的less文件,首先在less文件夹下就有一个navbar.less,其中定义的第一个样式就是.navbar如下:
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent;
// Prevent floats from breaking the navbar
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
}一点点看这个代码,这个navbar写的并不复杂.首先它不是一个规则,也就是没有传递参数一说,说明它内部使用的变量的值应该都来自于variables.less文件中的设置.先是定义了position:relative的相对定位,这就与之前页面上的position相对应上了.然后这里有一个min-height设定,我们在页面上看到的是50px,这里是通过@navbar-height变量的,去variables.less中找找看是不是这样.
这里我直接将variables.less文件中的涉及navbar的地方列出来:
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height: 340px;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%); 看到了吧,高度在这里设置的是50px.然后我们注意到navbar样式的margin-bottom在这里又引用了@line-height-computed.然后继续索引这个变量找到它的值是这样定义的:
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px 取字体的基本大小这里定义的是14px然后乘以基本行高定义的是1.428,如此相当于navbar中的margin-bottom的值就是20px.这个和最终显示的样式是相等的,但是这里我们看到这个值并不是直接设定的,而是根据字体和行高算出来的,在Bootstrap中很多地方应用到这种那方式,也就是牵一发而动全身.这里没法一一去理清它变量间的关系,但是从设计的方面我们可以知道,这么做是有好处的,比如字体变大了之后,其它与其配合的地方也会有相应的改变,从而在视觉上形成统一.
然后还有个border: 1px solid transparent;我们看到这个代码变量和其它的,就是直接写死了1px宽并且透明.然后我对navbar.less全局搜索了border,发现都没有通过变量设置,而是直接设置了宽度.
这样页面上显示的navbar对应的样式没了,我们接着看navbar.less中的navbar样式,里面有一段继承:
&:extend(.clearfix all); 这个的意思很好理解,&表示父级,也就是让父级.navbar继承.clearfix样式.这里清除浮动的样式是定义在/mixins/clearfix.less中,里面只有这一个规则.
(4) 寻找规律进行分析
现在把问题拉回到现实,我们研究Bootstrap中less的过程是为了什么?
我们的目的是为了写出和Bootstrap一样好的CSS代码,这才是我们的目的.诚然Bootstrap中为我们做好了很多如导航之类的组件,但是总有需要我们自己写的东西,这时候我们完全可以参照Bootstrap中对于组件的写法.
从头查看一遍navbar.less,它并没有嵌套很多类,基本上都是单独列出来的,以应付更灵活的HTML结构.并且组件定义的很细致,基本上从各个方面都有定义class.当然我们自己写的时候应该不用划分这么细致.
这时候在仔细思考一下它的实现步骤:
将可配置的灵活的东西定义为变量在variables.less中 --> 将可能被其他地方用到或者通用的规则定义到mixins中 --> 如果能使用Bootstrap的就尽量使用它自带的组件 --> 如果自己开发就为自己的组件单独一个文件,按照less的写法灵活的定位布局以及设置表现样式.
如果只是这么看其实less的写法和单纯CSS没什么太大的分别,只不过更加便捷而且加入了一些逻辑.
结尾
在一个大页面上非常小的一个点被应用了什么样式是很繁杂的,我问过很多CSS方面的熟练工,得出的结论就是CSS是一个经验很重要的东西.做得多了才会积累出足够的感觉,所以本文也没办告诉你先写1在写2然后1+2=3这样的步骤.
只是推荐在写或者说学习的过程中多思考,多练习,然后慢慢优化提升.
来源：oschina
链接：https://my.oschina.net/u/723632/blog/213789