在引導程序中使用 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 編譯 Bootstrap

編譯工具

帶有 makefile 的節點

命令行

Javascript

非官方 Mac 應用

更多 Mac 應用

緊縮

代碼包

簡單的