使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目再续

前情提要

  1. 使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目
  2. 使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目续

在前面，我创建了一个简单的首页，但是现在遇到问题了，我不能满足于 Bootstrap 的默认样式，希望能够根据自己的需求来定义样式，所以，为了能够愉快地修改样式，我需要先来理解一下基本的 Less 语法，更多详细资料可以参考官网

Less 是一个 CSS 预处理器，使用类似于 CSS 的语法，对 CSS 做了很多改进，不过，最后都应该编译成可直接供浏览器识别的 CSS 文件，其优势主要在于提升了开发速度以及可以更好地组织样式表。在项目初期我已经安装好 Less 了，安装方法还是一样，在node.js中使用Node包管理工具npm来安装，首先，去 http://nodejs.org/download/ 根据自己的操作系统下载对应的 Node 安装版本，由于我是使用的是 Windows XP，所以我下载了那个 node-v0.10.29-x86.msi 傻瓜式安装包：

node

下载完成后，双击该文件就可以安装了，当然我安装 Node 并不是为了使用它，而是为了使用 Node 包管理工具 NPM，NPM 是一个NodeJS包管理和分发工具，类似于 Ruby 的 gem，在 Node 0.4及以后的版本中，NPM 已经归入 Node 核心中了，所以不用再另外安装了，查看一下 NPM 的版本以确定已经安装成功：

npm -v

打印出来的数字就是版本号，经常更新 NPM 也是一个好习惯：

npm update -g npm

确认安装好了以后就可以安装 Less 了，在全局环境中安装 Less：

npm install -g less

如果去掉 -g 标识就是局部安装，那么就会安装在执行命令的路径下面，通常会选择项目的路径，由于我会在几乎所有项目中都使用 Less 开发，所以全局安装也没什么不妥，安装完成后可以检查一下 Less 的版本：

同样打印出版本号表示安装是成功了的，需要注意这里的命令是 lessc (不是 less)，也就是 Less Compiler，编译 Less 文件的时候也是使用这个命令，当前版本和官网上面一致，如果版本较低，可以试试升级：

npm update less -g

安装完成后就可以使用了，Less 文件的后缀名就是 .less，可以将一个普通 CSS 文件通过修改后缀名的方式来快速生成一个 Less 文件，不过，还是先来看看 Less 有些什么特性：

变量

变量可以用来存储准备多次使用的信息，只需要定义一次就能反复使用，如果对变量定义做了修改，那么所有使用了该变量的实例都会随之改变，试想，如果页面中使用了很多 #abc 这个颜色值，某一天希望全部修改为 #def，那么只需要修改一个变量的值就可以了，而不是无聊的查找替换。在 Less 中使用 @ 符号作为变量名前缀，变量名和变量值之间用 : 分隔，最后用 ; 结束变量申明：

@brand-primary: #428bca;

使用变量就像使用一个 CSS 属性值一样：

a {
  color: @brand-primary;
}

保存为一个 Less 文件，比如 example.less，然后使用如下命令编译成 CSS 文件：

lessc example.less > example.css

不要那个大于符号也可以（我也不知道要不要有什么区别），编译好后的 example.css 如下：

a {
  color: #428bca;
}

可以任意地使用变量，通常情况下，后申明的同名变量会覆盖之前申明的值，也可以在申明变量之前就使用该变量，变量申明会提前。在 Bootstrap 的 Less 文件里面找到 variables.less 文件（在这个项目中的路径是 less/bootstrap/variables.less），可以看到里面申明了很多变量，随意修改里面的变量值，然后重新编译即可定制化 Bootstrap 的样式。

嵌套规则

使用嵌套可以更合理地组织同一模块下的样式表，比如，下面是 navbar 模块的样式：

.navbar-nav { ... }
.navbar-nav > li { ... }
.navbar-nav > li > a { ... }
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus { ... }

反复书写 .navbar-nav... 就算是复制粘贴也让人觉得恶心，好在 Less 里面可以使用大括号嵌套语法：

.navbar-nav { ...
  > li { ...
    > a { ...
      &:hover,
      &:focus { ... }
    }
  }
}

编译后生成的 CSS 文件和上面基本一致，可以看到，使用嵌套规则提高了书写样式的效率，虽然编译后的 CSS 样式文件并没有什么实质变化，但是 Less 文件可以更容易编写和维护。

& 符是父元素引用符，在这里 & 就相当于引用 navbar-nav > li > a，如上，使用父元素引用符可以简化伪类、伪元素样式的编写，另外可以将选择器进行调换：

.main {
  .content {
    width: 70%;
  }

  .content & {
    width: 100%;
  }

  .content & {
    .two & {
      color: pink;
    }
  }
}

生成 CSS 代码如下：

.main .content {
  width: 70%;
}

.content .main {
  width: 100%;
}

.two .content .main {
  color: pink;
}

也可用于创建多类选择器（级联选择器）：

.collapse {
  &.in {
    display: block;
  }
}

生成 CSS 代码如下：

.collapse.in {
  display: block;
}

该选择器选择的是同时具有这两个 class 的元素。

在嵌套里面申明的变量为局部变量，嵌套之外的环境不能使用该变量：

a {
  color: @brand-primary;
  @brand-primary: #428bca;
}

div {
  background-color: @brand-primary; // NameError: variable @brand-primary is undefined
}

同样，在局部修改变量后不会对嵌套之外的环境产生影响：

@brand-primary: #428bca;
a {
  color: @brand-primary; // #c1ba62
  @brand-primary: #c1ba62;
}

div {
  background-color: @brand-primary; // #428bca
}

还有一种是玩法是本项目已经引入了 Modernizr.js 脚本，该脚本会在页面加载的时候检测浏览器的特性，根据浏览器支持与不支持某些特性而在 html 元素上添加了很多 class：

这是我用 Chrome 24.0 打开看到的效果，可以看到该浏览器对这些特性的支持都很好，对于不支持的特性前面有个 no- 前缀，比如 csstransform3d 是不支持的，因此写样式的时候可以像下面这样写：

div {
  ... // 支持 3d 变换时的样式
  .no-csstransform3d & {
    ... // 不支持 3d 变换时的样式
  }
}

当然，这个例子并不是很恰当！

混合

混合（mixin）是指可重用的一段代码，最常见的应用是为实验性 CSS 属性处理浏览器前缀，比如说我要使用过渡(transition)属性，为了兼容更多主流浏览器，我可能会这样写：

-webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;

那我所有使用过渡属性的地方都得这样写，比较麻烦，定义成一个 mixin 的话，就像这样：

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}

调用的时候只要传入参数就可以了：

.thumbnail {
  .transition(all .2s ease-in-out);
}

好处是写的时候不用反复写同一条属性的各种前缀了，同样，如果以后不再需要带某个前缀的属性了，那么只需要修改一下定义的 mixin 然后再重新编译一次就 OK 了，当然混合的威力远远不止如此。

运算

在 Less 的世界里可以进行数学运算，比如可以使用函数加深一个颜色的值：

a:hover {
  darken(@link-color, 15%);
}

也可以进行常见的四则运算：

.navbar > li > a {
  padding-top: ((@navbar-height - @line-height-computed) / 2);
  padding-bottom: ((@navbar-height - @line-height-computed) / 2);
}

导入文件

使用导入文件功能可以将 Less 文件分为不同的模块组件单独存放，然后将需要用到的 Less 文件全部导入到一个主 Less 文件中，最后编译成一个单独的 CSS 样式文件，比如在 less/bootstrap/bootstrap.less 文件中可以看到：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

通常情况下，会先导入变量、mixins，然后 Reset/重置样式，接下来再是其它模块。

以上是 Less 的一些基本功能，在清楚了之后才能随心所欲地修改 Bootstrap 的样式，不过在此期间 Bootstrap 已经升级到 3.2.0 版本了，所以我决定跟上潮流，将 Bootstrap 相关文件都更新到了官方最新版本（由于之前还没有编辑过样式文件，直接删除替换掉就可以了）。回到那个可爱的三列内容栏：

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h2>Welcome!</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">See our portfolio</a></p>
    </div>
    <div class="col-sm-4">
      <h2>Recent Updates</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">See what's new!</a></p>
    </div>
    <div class="col-sm-4">
      <h2>Our Team</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">Meet the team!</a></p>
    </div>
  </div><!-- end .row -->
</div><!-- end .container -->

Bootstrap 定义了4类网格 class，以适应不同的屏幕分辨率，分别以 col-xs，col-sm，col-md，col-lg 为前缀，col-xs 表示就算在超小屏幕下列也会浮动并呈现为网格样式，col-sm 表示只在小屏幕及以上会呈现为网格样式、而在超小屏幕下列就不会再浮动，而是占满整行，类似的 col-lg 列就只会在大屏幕上才浮动，关于各种屏幕分辨率的断点在 bootstrap/variables.less 里面有详细定义。

因为我不想使用 col-sm-4 这样的 class，所以先将这些 class 替换掉，为了避免和 Bootstrap 命名冲突，我都为自定义 class 加上了前缀，当然这个前缀不代表任何意思：

<div class="container">
  <div class="row">
    <div class="x-column">
      <h2>Welcome!</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">See our portfolio</a></p>
    </div>
    <div class="x-column">
      <h2>Recent Updates</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">See what's new!</a></p>
    </div>
    <div class="x-column">
      <h2>Our Team</h2>
      <p>Suspendisse et arcu felis ...</p>
      <p><a href="#">Meet the team!</a></p>
    </div>
  </div><!-- end .row -->
</div><!-- end .container -->

先在 less 文件夹里面新建一个 main.less 的文件，把 bootstrap.less 导入进来，就相当于把所有 Bootstrap Less 文件都导入进来了，然后后面再导入一个自己创建的 Less 文件，就叫 custom.less 吧：

@import "bootstrap/bootstrap.less";
@import "costom.less";

在 custom.less 中输入如下代码：

.x-column {
  .make-sm-column(4);
}

这里使用了 Bootstrap 预定义的 mixin，然后重新编译：

lessc less/main.less css/main.css

编译之后的相关 CSS 如下，可以在 main.css 的最末尾看到：

.x-column {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .x-column {
    float: left;
    width: 33.33333333%;
  }
}

由于我添加了自己定义的样式，同时我也不乐意在一个页面中添加多个样式文件（增加了 HTTP 请求），所以我把 Bootstrap 的样式和我自己定义的样式都整合到了一个样式文件中，这样一来就不好意思再用 bootstrap.css 这个文件名了，所以我改成了 main.css。index.html 页面上的内容也得随之更新一下，这个不能忘记：

<link rel="stylesheet" href="css/main.css">

最终得到的效果和使用 col-sm-4 这个 class 是一样的，为什么这么做呢？这样如果我想一个内容栏占满整行，而不是一行三列，那么我只要修改 Less 文件就可以了，而不是去修改 HTML:

.x-column {
  .make-sm-column(12);
}

就这么简单，可以参考一下 Bootstrap 的 mixins 文件查看更多信息。

资源列表

posted @ 2014-08-01 22:54  by.Genesis  阅读(2010)  评论(1)  编辑  收藏  举报