在Bootstrap中使用LESS

我们使用 LESS (一种CSS预处理器)定制和扩展Bootstrap。 LESS充分利用变量，混合以及其他有用的工具来构建Bootstrap的CSS。

为什么使用LESS?

Bootstrap使用LESS构造核心，LESS是由我们的好友 Alexis Sellier 创造的一种动态样本表语言。它让系统底层的CSS开发变得更快捷高效，更有生趣。

包括什么?

做为CSS的扩展，LESS包括变量，可重用代码段的混合，简单的数学操作，内嵌，以及颜色方法等等。

了解更多

详见LESS官网 http://lesscss.org 。
详见LESS中国官网 http://lesscss.net 。

变量

没有使用LESS之前，在CSS中管理颜色和像素值是个痛苦的事情，通常充斥着复制粘贴操作。现在可以借助LESS将颜色和像素值声明为变量，并对其一次性赋值。

混合

需在一个规则的ol的CSS中声明三种边框圆角时怎么办？借助混合，可以将它们写到一行，然后在其他地方重用。

运算

通过数学运算可以即时灵活地调整栅格尺寸和行间距。借助加减乘除，将CSS变更有条理。

超链接

`@linkColor`	#08c	默认的链接颜色
`@linkColorHover`	`darken(@linkColor, 15%)`	默认悬停时的链接颜色

栅格系统

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

排版

`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

灰度色

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#fff

强调色

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

组件

按钮

`@primaryButtonBackground`	`@linkColor`

表单

`@placeholderText`	`@grayLight`

导航栏

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

表单状态和通知

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

关于混合

基本的混合

基本的混合从本质上来说，就是包括整个或是部分代码片段。写法类似一个CSS类，可以随处调用。

.element {
  .clearfix();
}

带参数的混合

带参数的混合和基本混合很像，不同之处是前者可以接收参数(根据名称)，参数可以有默认值。

.element {
  .border-radius(4px);
}

易于定制

基本上Bootstrap所有的混合都保存在mixins.less，这是一个出色的工具类.less文件，我们可以在任何一个.less文件中使用其中的混合。

因此，直接使用已有的混合或是自定义一个新混合皆可。

包含混合

实用工具

混合	参数	用法
`.clearfix()`	无	清除浮动
`.tab-focus()`	无	添加类似Webkit获得焦点的风格和类似Firefox的的外包线
`.center-block()`	无	使用`margin: auto`把块级元素自动居中
`.ie7-inline-block()`	无	添加规则的 `display: inline-block` 以支持IE7
`.size()`	`@height: 5px, @width: 5px`	快速设置行高和行宽
`.square()`	`@size: 5px`	基于`.size()` 设置正方形区域
`.opacity()`	`@opacity: 100`	设置透明度的百分比 (比如 "50" 或 "75")

表单

混合	参数	用法
`.placeholder()`	`@color: @placeholderText`	设置输入框中 `placeholder` 的字体颜色

排版

混合	参数	用法
`#font > #family > .serif()`	无	对某个元素应用一系列serif衬线字体
`#font > #family > .sans-serif()`	无	对某个元素应用一系列sans-serif字体
`#font > #family > .monospace()`	无	对某个元素应用一系列monospace字体
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	方便设置字体大小，粗细和行间距
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	设置衬线字体族serif，字体大小，粗细和行间距
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	设置sans-serif字体族，字体大小，粗细和行间距
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	设置monospace字体族，字体大小，粗细和行间距

栅格系统

混合	参数	用法
`.container-fixed()`	无	创建一个水平居中的容器，用以容纳内容
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	使用 n 列和 x 像素间距宽度，生成一个象素栅格系统(容器，行，列)
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	使用 n 列和 x % 间距宽度，生成一个百分比栅格系统

CSS3属性

混合	参数	用法
`.border-radius()`	`@radius: 5px`	元素圆角化，可以是一个单独的值，也可以分别是四个角的值
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	对元素应用阴影
`.transition()`	`@transition`	添加CSS3过渡效果(比如， `all .2s linear`)
`.rotate()`	`@degrees`	旋转一个元素 n 度
`.scale()`	`@ratio`	对一个元素缩放原有大小的 n 倍
`.translate()`	`@x: 0, @y: 0`	在平面上移动x和y个像素
`.background-clip()`	`@clip`	裁剪一个元素的背景 (用于 `border-radius`)
`.background-size()`	`@size`	通过CSS3更改背景图片的大小
`.box-sizing()`	`@boxmodel`	改变一个元素的盒(box)模型 (比如，用在100%宽度 `input` 上的 `border-box` )
`.user-select()`	`@select`	更改页面文本的选择光标
`.resizable()`	`@direction: both`	改变右下角坐标以重置元素大小
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	让元素中的内容使用CSS3的列

背景和渐变

混合	参数	用法
`#translucent > .background()`	`@color: @white, @alpha: 1`	设置一个元素的背景色和透明度
`#translucent > .border()`	`@color: @white, @alpha: 1`	设置一个元素的边框的颜色和透明度
`#gradient > .vertical()`	`@startColor, @endColor`	创建一个跨浏览器的垂直背景渐变
`#gradient > .horizontal()`	`@startColor, @endColor`	创建一个跨浏览器的水平背景渐变
`#gradient > .directional()`	`@startColor, @endColor, @deg`	创建一个跨浏览器的有斜度的背景渐变
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	创建一个跨浏览器的三色背景渐变
`#gradient > .radial()`	`@innerColor, @outerColor`	创建一个跨浏览器的放射背景渐变
`#gradient > .striped()`	`@color, @angle`	创建一个跨浏览器的条纹背景渐变
`#gradientBar()`	`@primaryColor, @secondaryColor`	用于给按钮指定渐变背景和浅暗的边框

注意： 如果您向Github pull修改后的代码，您必须通过下列方式重新编译CSS。

编译的工具

带有makefile的Node.js

运行下列命令，利用npm在全局环境下安装LESS命令行编译器和uglify-js：

$ npm install -g less uglify-js

安装成功后，在您的Bootstrap的根目录下运行 make 即可编译CSS。

此外，如果您已经安装了 watchr ，您可以运行 make watch ，这样您每次修改Bootstrap后，就会自动重编译Bootstrap。（不是必须运行，这样做仅仅是出于方便。）

命令行

在Node下运行下列命令安装LESS命令行工具：

$ lessc ./lib/bootstrap.less > bootstrap.css

如果想压缩生成的css大小，就一定要在命令行参数中包含 --compress 。

Javascript

下载最新的 Less.js 并在 <head> 中包含Bootstrap中的less路径和less.js文件路径。

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

要重编译.less文件，只要在保存文件后刷新页面。Less.js会重新编译.less文件并进行本地存储。

非官方的Mac应用

非官方Mac应用监视.less文件所在的目录，每次观察到.less文件发生改动都会自动将.less编译成本地文件。

如果您喜欢，您可以在应用的首选项设置自动最小化代码，以及编译后的文件目录。

使用LESS

为什么使用LESS?

包括什么?

了解更多

运算

Bootstrap变量 LESS变量和变量值，以及用法指南

超链接

栅格系统

排版

灰度色

强调色

组件

按钮

表单

导航栏

表单状态和通知

Bootstrap 混合

关于混合

基本的混合

带参数的混合

易于定制

包含混合

实用工具

表单

排版

栅格系统

CSS3属性

背景和渐变

使用LESS编译Bootstrap

编译的工具

带有makefile的Node.js

命令行

Javascript

非官方的Mac应用

更多Mac应用

中文LESS资料