在Bootstrap中使用LESS

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

为什么使用LESS?

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

包括什么?

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

了解更多

LESS CSS

详见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编译成本地文件。

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

更多Mac应用

Crunch

Crunch是一个用Abode Air构造的界面优美的LESS编辑器和编译器。

CodeKit

CodeKit同样是非官方的Mac应用,可以编译LESS,SASS,Stylus和CoffeeScript。

Simpless

跨Mac, Linux, 和PC平台的应用,可以拖拽LESS文件进行编译,而且其代码开源, 代码托管在GitHub上

中文LESS资料

LESS官方站中文版

飞长(王玉林)翻译维护。

在线编译

在线编译LESS,非常方便!

工具汇总