在引导程序中使用 LESS

使用 CSS 预处理器LESS自定义和扩展 Bootstrap ，以利用用于构建 Bootstrap 的 CSS 的变量、mixin 等。

为什么少？

Bootstrap 以 LESS 为核心，这是一种由我们的好朋友Alexis Sellier创建的动态样式表语言。它使开发基于系统的 CSS 更快、更容易、更有趣。

包括什么？

作为 CSS 的扩展，LESS 包括变量、用于可重用代码片段的 mixin、用于简单数学的操作、嵌套，甚至颜色函数。

学到更多

访问官方网站http://lesscss.org/了解更多信息。

变量

在 CSS 中管理颜色和像素值可能有点麻烦，通常充满了复制和粘贴。但 LESS 不是——将颜色或像素值分配为变量并更改一次。

混合

您需要在常规 ol' CSS 中进行这三个边界半径声明？现在它们在 mixin 的帮助下缩减到一行，你可以在任何地方重复使用的代码片段。

运营

通过在运行中进行数学运算，使您的网格、领先和更加灵活。乘法、除法、加法和减法使您的 CSS 健全。

脚手架和链接

`@bodyBackground`	`@white`	页面背景颜色
`@textColor`	`@grayDark`	整个正文、标题等的默认文本颜色
`@linkColor`	`#08c`	默认链接文本颜色
`@linkColorHover`	`darken(@linkColor, 15%)`	默认链接文本悬停颜色

网格系统

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

排版

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	门洛，摩纳哥，“Courier New”，等宽
`@baseFontSize`	13像素	必须是像素
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18像素	必须是像素
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

表

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

灰度颜色

`@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

成分

纽扣

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

形式

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

表单状态和警报

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

导航栏

`@navbarHeight`	40像素
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

下拉菜单

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

英雄单位

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

关于混入

基本混合

基本的 mixin 本质上是 CSS 片段的包含或部分。它们就像 CSS 类一样编写，可以在任何地方调用。

. 元素{
  . 清除修复（）；
}

参数混合

参数 mixin 就像一个基本的 mixin，但它也接受带有可选默认值的参数（因此得名）。

. 元素{
  . 边框-半径（4px ）；
}

轻松添加自己的

几乎所有 Bootstrap 的 mixin 都存储在 mixins.less 中，这是一个很棒的实用 .less 文件，使您可以在工具包中的任何 .less 文件中使用 mixin。

因此，请继续使用现有的，或者根据需要随意添加自己的。

包含的mixin

实用程序

米信	参数	用法
`.clearfix()`	没有任何	添加到任何父级以清除其中的浮动
`.tab-focus()`	没有任何	应用 Webkit 焦点样式和圆形 Firefox 轮廓
`.center-block()`	没有任何	使用自动居中块级元素`margin: auto`
`.ie7-inline-block()`	没有任何	除了常规使用`display: inline-block`以获得 IE7 支持
`.size()`	`@height @width`	快速设置一行的高度和宽度
`.square()`	`@size`	建立在`.size()`将宽度和高度设置为相同值的基础上
`.opacity()`	`@opacity`	以整数形式设置不透明度百分比（例如，“50”或“75”）

形式

米信	参数	用法
`.placeholder()`	`@color: @placeholderText`	设置`placeholder`输入的文本颜色

排版

米信	参数	用法
`#font > #family > .serif()`	没有任何	使元素使用衬线字体堆栈
`#font > #family > .sans-serif()`	没有任何	使元素使用无衬线字体堆栈
`#font > #family > .monospace()`	没有任何	使元素使用等宽字体堆栈
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	轻松设置字体大小、粗细和行距
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	将字体系列设置为衬线，并控制大小、粗细和行距
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	将字体系列设置为无衬线，并控制大小、粗细和行距
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	将字体系列设置为等宽，并控制大小、粗细和行距

网格系统

米信	参数	用法
`.container-fixed()`	没有任何	创建一个水平居中的容器来保存您的内容
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	生成具有n列和x像素宽的装订线的像素网格系统（容器、行和列）
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	生成具有n列和x % 宽边距的百分比网格系统
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	为元素生成像素网格系统`input`，考虑填充和边框
`.makeColumn`	`@columns: 1, @offset: 0`	将任何`div`变成没有`.span*`类的网格列

CSS3 属性

米信	参数	用法
`.border-radius()`	`@radius`	圆化元素的角。可以是单个值或四个空格分隔的值
`.box-shadow()`	`@shadow`	给元素添加阴影
`.transition()`	`@transition`	添加 CSS3 过渡效果（例如，`all .2s linear`）
`.rotate()`	`@degrees`	将元素旋转n度
`.scale()`	`@ratio`	将元素缩放到其原始大小的n倍
`.translate()`	`@x, @y`	在 x 和 y 平面上移动元素
`.background-clip()`	`@clip`	裁剪元素的背景（对有用`border-radius`）
`.background-size()`	`@size`	通过 CSS3 控制背景图像的大小
`.box-sizing()`	`@boxmodel`	更改元素的盒子模型（例如，`border-box`对于 full-width `input`）
`.user-select()`	`@select`	控制页面上文本的光标选择
`.backface-visibility()`	`@visibility: visible`	使用 CSS 3D 变换时防止内容闪烁
`.resizable()`	`@direction: both`	使任何元素在右侧和底部可调整大小
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	使任何元素的内容使用 CSS3 列
`.hyphens()`	`@mode: auto`	需要时使用 CSS3 连字符（包括`word-wrap: break-word`）

背景和渐变

米信	参数	用法
`#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`	用于按钮分配渐变和稍暗的边框

注意：如果您使用修改后的 CSS 向 GitHub 提交拉取请求，则必须通过这些方法中的任何一种重新编译 CSS。

编译工具

带有 makefile 的节点

通过运行以下命令，使用 npm 全局安装 LESS 命令行编译器、JSHint、Recess 和 uglify-js：

$ npm install -g less jshint 凹槽 uglify-js

安装后，只需make从引导目录的根目录运行即可，一切就绪。

此外，如果您安装了watchr，您可能会在make watch每次编辑 bootstrap 库中的文件时自动重建 bootstrap（这不是必需的，只是一种方便的方法）。

命令行

通过 Node 安装 LESS 命令行工具并运行以下命令：

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

--compress如果您要保存一些字节，请务必包含在该命令中！

Javascript

下载最新的 Less.js并在<head>.

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

要重新编译 .less 文件，只需保存它们并重新加载您的页面。Less.js 编译它们并将它们存储在本地存储中。

非官方 Mac 应用

非官方的 Mac 应用程序会监视 .less 文件的目录，并在每次保存监视的 .less 文件后将代码编译为本地文件。

如果您愿意，您可以在应用程序中切换首选项以自动缩小以及编译文件最终位于哪个目录。

用 LESS 构建

为什么少？

包括什么？

学到更多

变量

混合

运营

引导变量LESS 变量、它们的值和使用指南

脚手架和链接

网格系统

排版

表

灰度颜色

强调色

成分

纽扣

形式

表单状态和警报

导航栏

下拉菜单

英雄单位

引导混合

关于混入

基本混合

参数混合

轻松添加自己的

包含的mixin

实用程序

形式

排版

网格系统

CSS3 属性

背景和渐变

使用 LESS 编译引导程序

编译工具

带有 makefile 的节点

命令行

Javascript

非官方 Mac 应用

更多 Mac 应用

紧缩

代码包

简单的