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

MENOS CSS rehegua

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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.

  1. . elemento { .
  2. . ñemyatyrõ hesakãva ();
  3. } 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.

  1. . elemento { .
  2. . rembe'y - radio ( 4px );
  3. } 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úvamargin: auto
.ie7-inline-block() avave Eipuru además de regular display: inline-blockohupyty 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 placeholderjehaipyre 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 porcentual orekóva n columna ha x % canalización ancho
#grid > .input() @gridColumnWidth, @gridGutterWidth Omoheñói sistema cuadrícula píxel inputelemento-kuérape g̃uarã, contabilidad acolchado ha frontera rehegua
.makeColumn @columns: 1, @offset: 0 Embojere oimeraẽva divpeteĩ 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 Jajapo escala petet elemento rehe n jey tuichakue ypykue
.translate() @x, @y Ñamongu e 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-boxpeteĩ 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
.hyphens() @mode: auto CSS3 ñe’ẽjoaju reipotáramo (oike ipype word-wrap: break-word) .

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, JSHint, Recess ha uglify-js globalmente npm ndive emongu’évo ko tembiapoukapy:

$ npm emohenda -g sa’ive jshint receso 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.

Hetave Mac purupyrã

Crunch rehegua

Crunch haꞌehína peteĩ editor ha compilador LESS ojehecha porãitereíva oñemopuꞌavaꞌekue Adobe Air-pe.

CódigoKit rehegua

Ojapo peteĩchagua karai Mac app ndaha’éiva oficial ndive, CodeKit ha’e peteĩ Mac app ombyatýva LESS, SASS, Stylus ha CoffeeScript.

Iporã’ỹva

Mac, Linux ha PC app ojegueraha ha ojegueraha hag̃ua oñemboheko hag̃ua archivo LESS. Avei, pe código fuente oĩ GitHub -pe .