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

MAS CSS

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.

  1. . elemento { .
  2. . chuya allichay ();
  3. } .

Mixinas paramétricas nisqa

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

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

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'achispamargin: auto
.ie7-inline-block() mana mayqinpas Utilizar además de regular display: inline-blockpara 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 placeholderYaykuchinapaq 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 divrejilla 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-boxhuk 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.

Aswan Mac nisqa appkuna

Crunch

Crunch huk sumaq qhaway LESS editor chaymanta compilador Adobe Air kaqpi ruwasqa.

Kit de Código

Kikin runamanta ruwasqa mana oficial Mac ruwana hina, CodeKit huk Mac ruwana LESS, SASS, Stylus, chaymanta CoffeeScript huñun.

Sin simple

Mac, Linux, chaymanta PC app LESS archivokuna huñunapaq aysanapaq chaymanta urqunapaq. Astawan, pukyuta GitHub kaqpi kachkan .