在引導程序中使用 LESS

使用 CSS 預處理器LESS自定義和擴展 Bootstrap ,以利用用於構建 Bootstrap 的 CSS 的變量、mixin 等。

為什麼少?

Bootstrap 以 LESS 為核心,這是一種由我們的好朋友Alexis Sellier創建的動態樣式表語言。它使開發基於系統的 CSS 更快、更容易、更有趣。

包括什麼?

作為 CSS 的擴展,LESS 包括變量、用於可重用代碼片段的 mixin、用於簡單數學的操作、嵌套,甚至顏色函數。

學到更多

更少的 CSS

訪問官方網站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 類一樣編寫,可以在任何地方調用。

  1. . 元素{
  2. . 清除修復();
  3. }

參數混合

參數 mixin 就像一個基本的 mixin,但它也接受帶有可選默認值的參數(因此得名)。

  1. . 元素{
  2. . 邊框-半徑4px );
  3. }

輕鬆添加自己的

幾乎所有 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 文件後將代碼編譯為本地文件。

如果您願意,您可以在應用程序中切換首選項以自動縮小以及編譯文件最終位於哪個目錄。

更多 Mac 應用

緊縮

Crunch 是一款外觀精美的 LESS 編輯器和編譯器,構建於 Adob​​e Air 之上。

代碼包

CodeKit 由與非官方 Mac 應用程序相同的人創建,是一個編譯 LESS、SASS、Stylus 和 CoffeeScript 的 Mac 應用程序。

簡單的

用於拖放編譯 LESS 文件的 Mac、Linux 和 PC 應用程序。另外,源代碼在 GitHub 上