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.
LESS nisqawan ruwasqa
¿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.
Bootstrap tikraqkuna LESS tikraqkuna, chaninkuna, chaymanta llamkana kamachiykuna
Hipervínculos nisqakuna
@linkColor |
#08c nisqa | Ñ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
@baseFontSize |
13px nisqa |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px nisqa |
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
@primaryButtonBackground |
@linkColor |
Formas
@placeholderText |
@grayLight |
Navbar nisqa
@navbarHeight |
40px nisqa | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
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 |
Mixins de correa de arranque
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'achispamargin: auto |
.ie7-inline-block() |
mana mayqinpas | Utilizar además de regular display: inline-blockpara obtener apoyo IE7 |
.size() |
@height: 5px, @width: 5px |
Huk chirullapi sayayninta, anchunta ima utqaylla churay |
.square() |
@size: 5px |
Anchota .size(), sayaynintapas kikin chani hina churanapaqmi hatarichin |
.opacity() |
@opacity: 100 |
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 |
N columnayuq, x % ancho canalniyuq ima sistema de rejilla precente nisqa paqarichiy |
CSS3 nisqap kaqninkuna
| Mixin | Parámetros | Uso |
|---|---|---|
.border-radius() |
@radius: 5px |
Huk elementopa k’uchukunata muyurichiy. Huk chanilla utaq tawa espaciowan rakisqa chanikuna kanman |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Ima elementotapas paña kaqpi, urayninpipas hatun kayninta tikranapaq ruway |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Ima elementopa contenidonta CSS3 columnakunata llamk'achiyta ruway |
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 |
Compilar Bootstrap con LESS
Huñunapaq yanapakuykuna
Nodo con makefile nisqa
LESS kamachiy chiru huñuq chaymanta uglify-js tukuypaq npm kaqwan churay kay kamachiyta purichispa:
$ npm churay -g aswan pisi 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 ./lib/bootstrap.less > qallariy.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 .