Utilizar LESS con Bootstrap

Bootstrap LESS kaqwan ruway chaymanta mast'ariy , huk CSS ñawpaq ruwaq kaqwan, llamk'achisqa tikraqkuna, mixins chaymanta aswan llamk'achisqa Bootstrap CSS ruwanapaq.

¿Imaraykutaq ASWAN?

Bootstrap ruwasqa LESS kaqwan ukhunpi, huk dinamico estilo raphi simi ruwasqa allin masiyku, Alexis Sellier . Sistemakuna ruwasqa CSS wiñachiyta aswan utqaylla, aswan facil chaymanta aswan kusikuy ruwan.

¿Imataq chaypi kachkan?

CSS kaqpa mast'ariynin hina, LESS tikraqkunata, mixins kaqmanta llamk'anapaq fragmentos de código kaqpaq, llamkanakuna sanu yupaypaq, anidado kaqpaq, chaymanta llimp'i ruwanakuna kaqpas.

Astawan yachaykunaykipaq

Astawan yachanaykipaq kay web oficial nisqaman yaykuy http://lesscss.org/ nisqapi .

Variables nisqakuna

CSS kaqpi llimp'ikunata chaymanta pixel chanikunata kamachiyqa huk chhika nanay kanman, aswanta hunt'a copiawan k'askachiywan. Mana LESS kaqwan ichaqa —llimp'ikunata utaq pixel chanikunata tikraq hina churay chaymanta huk kuti tikray.

Mixinkuna

Chay kimsa frontera-radio declaraciones ruwanayki tiyan regular ol' CSS kaqpi? Kunanqa huk chiruman uraykamunku mixins yanapakuywan, fragmentos de código maypipas wakmanta llamk'achiy atikunki.

Operaciones nisqakuna

Ruway rejillayki, umalliq, chaymanta aswan super flexible ruwaspa matemáticas chaymanta phawaypi operaciones kaqwan. CSS sanidadman ñanniyki mirachiy, rakiy, yapay chaymanta qichuy.

Andamios y eslabones

`@bodyBackground`	`@white`	Color de fondo de página
`@textColor`	`@grayDark`	Llapan kurkupaq, umalliqkunapaq, hukkunapaqpas ñawpaqmanta churasqa qillqa llimp'i
`@linkColor`	`#08c`	Ñawpaqmanta churasqa t'inki qillqa llimp'i
`@linkColorHover`	`darken(@linkColor, 15%)`	Ñawpaqmanta churasqa t'inki qillqa hover color

Sistema de rejilla

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

Tipografía

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, mana imayuq
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Mónaco, "Mesajero Nuevo", monoespacio
`@baseFontSize`	13px nisqa	Pixelkuna kanan tiyan
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px nisqa	Pixelkuna kanan tiyan
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tablas

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

Colores de escala de grises

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

Colores de acento

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

Componentes nisqakuna

Botones

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

Formas

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

Formular estados y alertas

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

Navbar nisqa

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

Urmachiykuna

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

Unidad de héroe

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

Mixinkunamanta

Mixins básicas nisqa

Huk mixin básica nisqaqa aswanta huk include icha huk partial huk CSS fragmentopaq. Chaykunaqa CSS clase hinam qillqasqa kachkan, maypipas sutichasqa kanman.

. elemento { .
  . chuya allichay ();
} .

Mixinas paramétricas nisqa

Huk paramétrico mixin nisqaqa huk sapsi mixin hinam, ichataq parámetros nisqakunatapas (chayrayku suti) akllana ñawpaqmanta chanikunawanmi chaskikun.

. elemento { .
  . frontera - radiyu ( 4px );
} .

Facilmente añadir tu propio

Yaqa llapan Bootstrap kaqpa mixinkuna mixins.less kaqpi waqaychasqa kachkanku, huk sumaq yanapakuy .less willakuy chaymanta huk mixin mayqin .less willakuykunapi yanapakuypi llamk'achiyta atikun.

Chaymi, ñawpaqman riy hinaspa kunan kaqkunata servichikuy utaq mana manchakuspa yapay qampaq kaqta necesitasqaykiman hina.

Incluidos mixins

Utilidades

Mixin	Parámetros	Uso
`.clearfix()`	mana mayqinpas	Mayqin tayta mamamanpas yapay ukhupi flotadores nisqakunata ch’uyanchanapaq
`.tab-focus()`	mana mayqinpas	Webkit enfoque estilota chaymanta muyu Firefox esquemata churay
`.center-block()`	mana mayqinpas	Auto chawpi huk bloque-nivel elemento llamk'achispa`margin: auto`
`.ie7-inline-block()`	mana mayqinpas	Utilizar además de regular `display: inline-block`para obtener apoyo IE7
`.size()`	`@height @width`	Huk chirullapi sayayninta, anchunta ima utqaylla churay
`.square()`	`@size`	Anchota `.size()`, sayaynintapas kikin chani hina churanapaqmi hatarichin
`.opacity()`	`@opacity`	Tukuy yupaykunapi, opacidad pachakmanta (kayhina, "50" icha "75") churay.

Formas

Mixin	Parámetros	Uso
`.placeholder()`	`@color: @placeholderText`	`placeholder`Yaykuchinapaq qillqap llimp’inta churay

Tipografía

Mixin	Parámetros	Uso
`#font > #family > .serif()`	mana mayqinpas	Huk elementota serif qillqa pilata llamk'achiyta ruway
`#font > #family > .sans-serif()`	mana mayqinpas	Huk elementota sans-serif qillqa pilata llamk'achiyta ruway
`#font > #family > .monospace()`	mana mayqinpas	Huk elementota huk espacio letra pilata llamk'achiyta ruway
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Mana sasachakuspalla letrapa sayayninta, llasayninta, umalliqnintapas churay
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Letra aylluta serif kaqman churay, chaymanta kamachiy sayayninta, llasayninta chaymanta umalliqninta
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Letra ayllu sans-serif kaqman churay, chaymanta kamachiy sayayninta, llasayninta chaymanta umalliqninta
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Letra aylluta huk espacioman churay, chaymanta kamachiy sayayninta, llasayninta chaymanta umalliqninta

Sistema de rejilla

Mixin	Parámetros	Uso
`.container-fixed()`	mana mayqinpas	Huk horizontal chawpiyuq waqaychanata ruway, contenidoykita hap'inaykipaq
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Huk pixel rejilla sistemata (contenedor, fila, chaymanta columnakuna) n columnakunayuq chaymanta x pixel ancho canalización kaqwan paqarichiy
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Sistema de rejilla por ciento nisqa n columnayuq, x % ancho canal nisqayuq ima paqarichiy
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Elementokunapaq pixel rejilla sistemata paqarichiy `input`, rellenopaq chaymanta fronterakunapaq yupay
`.makeColumn`	`@columns: 1, @offset: 0`	Mayqintapas mana clasekunayuq `div`rejilla columnaman tikray`.span*`

CSS3 nisqap kaqninkuna

Mixin	Parámetros	Uso
`.border-radius()`	`@radius`	Huk elementopa k’uchukunata muyurichiy. Huk chanilla utaq tawa espaciowan rakisqa chanikuna kanman
`.box-shadow()`	`@shadow`	Huk elementoman huk llantuyta yapay
`.transition()`	`@transition`	CSS3 tikray ruwayta yapay (kayhina, `all .2s linear`) .
`.rotate()`	`@degrees`	Huk elementota n grados muyuchiy
`.scale()`	`@ratio`	Huk elementota n kuti ñawpaq sayayninmanta escalachiy
`.translate()`	`@x, @y`	Plano x y y nisqapi huk elementota kuyuchiy
`.background-clip()`	`@clip`	Huk elementop qhipanta kuchuy (paq allin `border-radius`) .
`.background-size()`	`@size`	CSS3 kaqnintakama qhipa siq'ikunap sayayninta kamachiy
`.box-sizing()`	`@boxmodel`	Huk elementopaq qutu modelota tikray (ahinataq, `border-box`huk hunt'a anchopaq `input`) .
`.user-select()`	`@select`	Huk p'anqapi qillqap akllayninta kursorwan kamachiy
`.backface-visibility()`	`@visibility: visible`	CSS 3D tikraykunata llamk'achkaspa imakunap llimp'iyninta hark'ay
`.resizable()`	`@direction: both`	Ima elementotapas paña kaqpi, urayninpipas hatun kayninta tikranapaq ruway
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Ima elementopa contenidonta CSS3 columnakunata llamk'achiyta ruway
`.hyphens()`	`@mode: auto`	CSS3 chirusqa mayk'aq munasqayki (incluye `word-wrap: break-word`) .

Antecedentes y gradientes

Mixin	Parámetros	Uso
`#translucent > .background()`	`@color: @white, @alpha: 1`	Huk elementoman huk translúcido fondo colorta quy
`#translucent > .border()`	`@color: @white, @alpha: 1`	Huk elementoman huk translúcido frontera colorta quy
`#gradient > .vertical()`	`@startColor, @endColor`	Huk chakasqa maskaq sayaq qhipa gradiente ruway
`#gradient > .horizontal()`	`@startColor, @endColor`	Huk chakasqa maskaqpa horizontal qhipa gradiente nisqa ruway
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Huk chakasqa maskaqpa ñannin qhipa gradiente nisqa ruway
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Huk chakasqa maskaq kimsa llimp’iyuq qhipa gradiente ruway
`#gradient > .radial()`	`@innerColor, @outerColor`	Huk chakasqa maskaq radial qhipa gradiente ruway
`#gradient > .striped()`	`@color, @angle`	Huk chakasqa maskaq rayayuq qhipa gradiente ruway
`#gradientBar()`	`@primaryColor, @secondaryColor`	Botonkunapaq llamk'achisqa huk gradiente chaymanta aswan pisi yana frontera churanapaq

Qhaway: Sichus huk aysana mañakuyta GitHub kaqman hukchasqa CSS kaqwan apachichkanki, CSS kaqmanta mayqin kay ruwanakunawanpas huñunayki tiyan .

Huñunapaq yanapakuykuna

Nodo con makefile nisqa

LESS kamachiy chiru huñuq, JSHint, Recess chaymanta uglify-js tukuypaq npm kaqwan churay kay kamachiyta purichispa:

$ npm churay -g aswan pisi jshint receso uglify-js

Huk kuti churasqa chaylla purichiy makesaphimanta bootstrap directorioykimanta chaymanta llapallayki churasqa kanki.

Chaymanta, sichus watchr churasqa kanki, purinkiman make watchbootstrap kikinmanta musuqmanta ruwasqa kananpaq sapa kuti huk willayta bootstrap lib kaqpi llamk'achinki (kayqa mana mañasqachu, huk conveniencia ñanlla).

Kamachiy chiru

LESS kamachiy chiru yanapakuyta Nodo kaqnintakama churay chaymanta kay kamachiyta purichiy:

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

¡Aseguray --compresschay kamachiypi churay sichus wakin bytekunata waqaychayta munanki!

Javascript nisqa

Aswan qhipa Less.js uraykachiy chaymanta chayman ñanta (hinallataq Bootstrap) kaqpi churay <head>.

<link rel = "estilo raphi/aswan" href = "/ñan/a/bootstrap.less" > <script src = "/ñan/a/aswan.js" ></script>

.less willañiqikunata musuqmanta huñunaykipaqqa, waqaychaylla hinaspa p'anqaykita musuqmanta kargay. Less.js chaykunata huñun chaymanta llaqta waqaychaypi waqaychan.

Mac nisqa mana oficial nisqa app

Mana oficial Mac ruwana .less willakuykunata directoriokunata qhawan chaymanta codigota llaqta willakuykunaman huñun sapa qhawasqa .less willakuypa waqaychaymanta qhipaman.

Sichus munanki, munasqakuna ruwanapi tikrayta atikunki kikillanmanta pisiyachiypaq chaymanta mayqin directorio kaqpi huñusqa willakuykunata tukun.

LESS nisqawan ruwasqa

¿Imaraykutaq ASWAN?

¿Imataq chaypi kachkan?

Astawan yachaykunaykipaq

Variables nisqakuna

Mixinkuna

Operaciones nisqakuna

Bootstrap tikraqkuna LESS tikraqkuna, chaninkuna, chaymanta llamkana kamachiykuna

Andamios y eslabones

Sistema de rejilla

Tipografía

Tablas

Colores de escala de grises

Colores de acento

Componentes nisqakuna

Botones

Formas

Formular estados y alertas

Navbar nisqa

Urmachiykuna

Unidad de héroe

Mixins de correa de arranque

Mixinkunamanta

Mixins básicas nisqa

Mixinas paramétricas nisqa

Facilmente añadir tu propio

Incluidos mixins

Utilidades

Formas

Tipografía

Sistema de rejilla

CSS3 nisqap kaqninkuna

Antecedentes y gradientes

Compilar Bootstrap con LESS

Huñunapaq yanapakuykuna

Nodo con makefile nisqa

Kamachiy chiru

Javascript nisqa

Mac nisqa mana oficial nisqa app

Aswan Mac nisqa appkuna

Crunch

Kit de Código

Sin simple