Oipurúvo LESS Bootstrap ndive

Emohenda ha embohape Bootstrap LESS ndive , peteĩ CSS ñemboguatarã, eipuru hag̃ua mbaꞌekuaarã, mixin ha hetave mbaꞌe ojeporúva oñemopuꞌa hag̃ua Bootstrap CSS.

Mba’érepa SA’ive?

Bootstrap ojejapo LESS reheve ipype, peteĩ ñe’ẽ estilo-pegua dinámico omoheñóiva ñane angirũ porã, Alexis Sellier . Ojapo pyaꞌeve, ndahasýi ha igustove hag̃ua oñembosakoꞌi hag̃ua CSS sistema rehegua.

Mba'épa oike ipype?

CSS ñembotuichave ramo, LESS oike umi mbaꞌekuaarã, mixin umi código pehẽngue ojepuru jeývape g̃uarã, tembiaporã matemática simple-pe g̃uarã, anidación ha umi función color rehegua jepe.

Eikuaave hag̃ua

Eike página web oficial-pe http://lesscss.org/-pe reikuaave haĝua.

Variables rehegua

Oñemboguata hag̃ua sa’y ha píxel valor CSS-pe ikatu hasy’imi, jepive henyhẽva copia ha pega-gui. Ndaha’éi LESS reheve jepémo upéicha—emohenda umi sa’y térã píxel valor variable ramo ha emoambue peteĩ jey.

Mixin-kuéra rehegua

Umi mbohapy declaración frontera-radio tekotevẽva rejapo regular ol' CSS-pe? Ko’áğa oguejy hikuái peteĩ línea-pe mixin pytyvõ rupive, código pehẽngue ikatúva reipuru jey mamove.

Operaciones rehegua

Ejapo nde cuadrícula, tendota ha súper flexibleve rejapóvo matemática en vuelo umi operación reheve. Emboheta, emboja’o, emoĩ ha eipe’a nde rape CSS sanidad-pe.

Andamio ha eslabones rehegua

`@bodyBackground`	`@white`	Página fondo color
`@textColor`	`@grayDark`	Jehaipyre sa’y ñepyrũrã hete tuichakue, iñakãrapu’ã ha hetave mba’épe g̃uarã
`@linkColor`	`#08c`	Enlace jehaipyre color por defecto
`@linkColorHover`	`darken(@linkColor, 15%)`	Enlace por defecto jehaipyre hover color

Sistema de rejilla rehegua

`@gridColumns`	12 rehegua
`@gridColumnWidth`	60px rehegua
`@gridGutterWidth`	20px rehegua
`@fluidGridColumnWidth`	6,382978723% rehegua .
`@fluidGridGutterWidth`	2,127659574% rehegua .

Tipografía rehegua

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif rehegua
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Mónaco, "Mesajero Nuevo", monoespacio
`@baseFontSize`	13px rehegua	Ha’eva’erã píxel
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px rehegua	Ha’eva’erã píxel
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabla-kuéra rehegua

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

Umi colores de escala de grises rehegua

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

Umi color de acento rehegua

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

Umi componente rehegua

Umi botón rehegua

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

Umi Formulario rehegua

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

Oñeforma estado ha alerta rehegua

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

Navbar rehegua

`@navbarHeight`	40px rehegua
`@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`

Umi desplegable rehegua

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

Unidad héroe rehegua

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

Mixin rehegua

Mixin básico rehegua

Peteĩ mixin básico haꞌehína esencialmente peteĩ include térã peteĩ parcial peteĩ CSS fragmento-pe g̃uarã. Ojehai hikuái peteĩ CSS mbo’esyryichaite ha ikatu oñehenói mamove.

. elemento { .
  . ñemyatyrõ hesakãva ();
} rehegua .

Mixinas paramétricas rehegua

Peteĩ mixin paramétrico ojoguaite peteĩ mixin básico-pe, ha katu avei omoneĩ umi parámetro (upévagui héra) oguerekóva valor por defecto opcional.

. elemento { .
  . rembe'y - radio ( 4px );
} rehegua .

Fácilmente emoĩve nde mba’éva

Haimete opaite Bootstrap mixin oñeñongatu mixins.less-pe, peteĩ utilidad iporãitereíva .less vore ombohapéva ndéve reipuru hag̃ua peteĩ mixin oimeraẽva .less vore oĩva tembipuru’i ryepýpe.

Upéicharõ, tereho tenonde gotyo ha eipuru umi oĩmava térã eñeñandu porãke emoĩve hag̃ua nde mbaʼéva reikotevẽháicha.

Oike avei umi mixin

Utilidades rehegua

Mixin rehegua	Parámetro-kuéra rehegua	Jeporu rehegua
`.clearfix()`	avave	Oñemoĩ oimeraẽ túvape omopotĩ hag̃ua umi flotador hyepýpe
`.tab-focus()`	avave	Eipuru Webkit enfoque estilo ha Firefox esquema redondo
`.center-block()`	avave	Auto centro peteĩ elemento nivel bloque rehegua oiporúva`margin: auto`
`.ie7-inline-block()`	avave	Eipuru además de regular `display: inline-block`ohupyty hag̃ua IE7 pytyvõ
`.size()`	`@height @width`	Pya’e emohenda yvate ha ipypuku peteĩ línea-pe
`.square()`	`@size`	Oñemopuꞌa `.size()`omohenda hag̃ua ipypuku ha ijyvate peteĩchagua valor ramo
`.opacity()`	`@opacity`	Emohenda, papapy entero-pe, porcentaje opacidad rehegua (techapyrã, "50" térã "75") .

Umi Formulario rehegua

Mixin rehegua	Parámetro-kuéra rehegua	Jeporu rehegua
`.placeholder()`	`@color: @placeholderText`	Emohenda `placeholder`jehaipyre sa’y umi entrada-pe g̃uarã

Tipografía rehegua

Mixin rehegua	Parámetro-kuéra rehegua	Jeporu rehegua
`#font > #family > .serif()`	avave	Ejapo peteĩ elemento oipuru hag̃ua peteĩ pila font serif rehegua
`#font > #family > .sans-serif()`	avave	Ejapo peteĩ elemento oipuru hag̃ua peteĩ pila fuente sans-serif rehegua
`#font > #family > .monospace()`	avave	Ejapo peteĩ elemento oipuru hag̃ua peteĩ pila fuente monoespacio rehegua
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Emohenda pya’e letra tuichakue, ipohýi ha tenondegua
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Emohenda letra familia serif-pe, ha econtrola tuichakue, ipohýi ha líder
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Emohenda letra familia sans-serif-pe, ha econtrola tuichakue, ipohýi ha tenondegua
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Emohenda familia fuente monoespacio-pe, ha econtrola tuichakue, ipohýi ha tenondegua

Sistema de rejilla rehegua

Mixin rehegua	Parámetro-kuéra rehegua	Jeporu rehegua
`.container-fixed()`	avave	Ejapo peteĩ mba’yru oñecentráva horizontalmente reñongatu hag̃ua ne contenido
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Emoheñói peteĩ sistema cuadrícula píxel rehegua (mbaꞌeryru, fila ha columna) n columna ha canalización x píxel ancho reheve
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Ogenera peteî sistema de rejilla precent orekóva n columna ha x % canalización ancho
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Omoheñói sistema cuadrícula píxel `input`elemento-kuérape g̃uarã, contabilidad acolchado ha frontera rehegua
`.makeColumn`	`@columns: 1, @offset: 0`	Embojere oimeraẽva `div`peteĩ columna cuadrícula rehegua umi `.span*`clase ÿre

CSS3 mba’ekuaarã

Mixin rehegua	Parámetro-kuéra rehegua	Jeporu rehegua
`.border-radius()`	`@radius`	Embojere umi esquina petet elemento rehegua. Ikatu peteĩ mbaꞌeteéva térã irundy mbaꞌekuaarã ojeipeꞌavaꞌekue espacio-gui
`.box-shadow()`	`@shadow`	Oñemoĩ peteĩ sombra gota peteĩ elemento rehe
`.transition()`	`@transition`	Oñemoĩve CSS3 ñembohasa efecto (techapyrã, `all .2s linear`) .
`.rotate()`	`@degrees`	Jajere petet elemento rehe n grado rehe
`.scale()`	`@ratio`	Escala petet elemento n jey tuichakue ypykue peve
`.translate()`	`@x, @y`	Ñamomýi petet elemento umi plano x ha y rehe
`.background-clip()`	`@clip`	Eikytĩ peteĩ elemento rapykuere (iporãva `border-radius`) .
`.background-size()`	`@size`	Ejoko taꞌãngamýi tenondegua tuichakue CSS3 rupive
`.box-sizing()`	`@boxmodel`	Emoambue modelo caja rehegua peteĩ elemento-pe g̃uarã (techapyrã, `border-box`peteĩ ancho completo-pe g̃uarã `input`) .
`.user-select()`	`@select`	Control cursor jeporavo jehaipyre peteĩ página-pe
`.backface-visibility()`	`@visibility: visible`	Ojejoko contenido parpadeo ojeporúvo CSS 3D transformada
`.resizable()`	`@direction: both`	Ejapo oimeraẽ elemento redimensionable akatúa ha iguy gotyo
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Ejapo oimeraẽ elemento contenido oipuru hag̃ua CSS3 vore

Umi antecedente ha gradiente-kuéra

Mixin rehegua	Parámetro-kuéra rehegua	Jeporu rehegua
`#translucent > .background()`	`@color: @white, @alpha: 1`	Ñame e petet elemento petet color fondo translúcido rehegua
`#translucent > .border()`	`@color: @white, @alpha: 1`	Ñame e petet elemento petet color frontera translúcida rehegua
`#gradient > .vertical()`	`@startColor, @endColor`	Ojapo peteĩ gradiente fondo vertical navegador kurusu rehegua
`#gradient > .horizontal()`	`@startColor, @endColor`	Ojapo peteĩ gradiente fondo horizontal navegador kurusu rehegua
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Ojapo peteĩ gradiente fondo direccional navegador kurusu rehegua
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Ejapo peteĩ kurusu navegador mbohapy sa’y gradiente fondo rehegua
`#gradient > .radial()`	`@innerColor, @outerColor`	Ojapo peteĩ gradiente fondo radial navegador kurusu rehegua
`#gradient > .striped()`	`@color, @angle`	Ejapo peteĩ gradiente fondo rayado navegador kurusu rehegua
`#gradientBar()`	`@primaryColor, @secondaryColor`	Ojepuru umi botón-pe g̃uarã oñemeꞌe hag̃ua peteĩ gradiente ha peteĩ borde iñypytũvéva michĩmi

Ñe’ẽñemi: Emondo ramo peteĩ mba’ejerure ojeipe’a hag̃ua GitHub-pe CSS oñemoambuéva reheve, embojoaju jeyva’erã CSS oimeraẽva ko’ã mba’ekuaarã rupive.

Tembipururã oñembosako’i hag̃ua

Nodo orekóva makefile

Emohenda LESS ñe’ẽmondo rape’apoha ha uglify-js globalmente npm ndive emongu’évo ko tembiapoukapy:

$ npm emohenda -g sa’ive uglify-js

Oñemoĩ rire makeeñemongu’énte nde bootstrap kundaha ypykuégui ha reimepaite.

Avei, oguerekóramo watchr oñemboguapýva, ikatu oñemboguata make watchoguereko hag̃ua bootstrap oñemopuꞌa jey ijeheguiete opaite jave emohenda peteĩ vore bootstrap lib-pe (kóva natekotevẽi, peteĩ método conveniencia-nte).

Línea de comando rehegua

Emohenda tembipuru LESS ñe’ẽmondo rape Nodo rupive ha emongu’e ko tembiapoukapy:

$ lessc ./menos/arranque.less > ñe’ẽñemi.css

¡Emoinge katuete --compressupe tembiapoukapype reñeha’ãramo reñongatu peteĩ byte!

Javascript rehegua

Emboguejy Less.js ipyahuvéva ha emoinge tape ohóva hese (ha Bootstrap) <head>.

<link rel = "hoja de estilo/menos" href = "/tape/a/bootstrap.less" > <script src = "/tape/a/menos.js" ></script>

Oñembyaty jey hag̃ua umi .less vore, eñongatu mante ha ekarga jey nde página. Less.js ombyaty ha oñongatu ñeñongatuha tendápe.

Mac app ndaha’éiva oficial

Mac purupyrã ndaha’éiva oficial ohecha umi directorio .less vore rehegua ha ombyaty código vore local-pe opaite ñeñongatu rire peteĩ vore .less ojesarekóva rehe.

Oiméramo ndegusta, ikatu emoambue umi preferencia oĩva app-pe oñemboguejy hag̃ua ijeheguiete ha mba’e directorio-pepa opa umi archivo oñembyatýva.

Oñemopu’ã LESS reheve

Mba’érepa SA’ive?

Mba'épa oike ipype?

Eikuaave hag̃ua

Variables rehegua

Mixin-kuéra rehegua

Operaciones rehegua

Umi mbaꞌekuaarã bootstrap rehegua LESS mbaꞌekuaarã, ivalór ha jepururã ñemboguata

Andamio ha eslabones rehegua

Sistema de rejilla rehegua

Tipografía rehegua

Tabla-kuéra rehegua

Umi colores de escala de grises rehegua

Umi color de acento rehegua

Umi componente rehegua

Umi botón rehegua

Umi Formulario rehegua

Oñeforma estado ha alerta rehegua

Navbar rehegua

Umi desplegable rehegua

Unidad héroe rehegua

Mixins de correa de arranque rehegua

Mixin rehegua

Mixin básico rehegua

Mixinas paramétricas rehegua

Fácilmente emoĩve nde mba’éva

Oike avei umi mixin

Utilidades rehegua

Umi Formulario rehegua

Tipografía rehegua

Sistema de rejilla rehegua

CSS3 mba’ekuaarã

Umi antecedente ha gradiente-kuéra

Oñembyatývo Bootstrap LESS reheve

Tembipururã oñembosako’i hag̃ua

Nodo orekóva makefile

Línea de comando rehegua

Javascript rehegua

Mac app ndaha’éiva oficial

Hetave Mac purupyrã

Crunch rehegua

CódigoKit rehegua

Iporã’ỹva