LESS erabiliz Bootstrap-ekin

Pertsonalizatu eta hedatu Bootstrap LESS , CSS aurreprozesadore batekin, Bootstrap-en CSS eraikitzeko erabiltzen diren aldagaiak, nahasketak eta gehiago aprobetxatzeko.

Zergatik GUTXIAGO?

Bootstrap LESS oinarrian egina dago, gure lagun onak, Alexis Sellier -ek, sortutako estilo-orri hizkuntza dinamikoa . Sistemetan oinarritutako CSS garatzea azkarrago, errazagoa eta dibertigarriagoa egiten du.

Zer sartzen da?

CSS-ren luzapen gisa, LESS-ek aldagaiak, kode zati berrerabilgarrietarako nahasketak, matematika sinpleetarako eragiketak, habiak eta kolore funtzioak ere barne hartzen ditu.

Gehiago ikasi

Bisitatu webgune ofiziala http://lesscss.org/ helbidean informazio gehiago lortzeko.

Aldagaiak

Koloreak eta pixel-balioak CSS-en kudeatzea min samarra izan daiteke, normalean kopiatu eta itsatsiz beteta. Ez ordea LESS-ekin: esleitu koloreak edo pixel-balioak aldagai gisa eta aldatu behin.

Mixinak

CSS arruntean egin behar dituzun muga-erradioaren hiru deklarazio horiek? Orain lerro bakarrera daude mixinen laguntzaz, edonon berrerabili ditzakezun kode zatiak.

Eragiketak

Egin zure sareta, liderra eta malguagoa eragiketekin matematika joan-etorrian eginez. Biderkatu, zatitu, gehitu eta kendu zure bidea CSS sanotasunera.

Aldamioak eta loturak

`@bodyBackground`	`@white`	Orriaren atzeko planoaren kolorea
`@textColor`	`@grayDark`	Testuaren kolore lehenetsia gorputz osorako, goiburuetarako eta abar
`@linkColor`	`#08c`	Estekaren testuaren kolore lehenetsia
`@linkColorHover`	`darken(@linkColor, 15%)`	Estekaren testua pasatzeko kolore lehenetsia

Sare sistema

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

Tipografia

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13 px	Pixelak izan behar dira
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 px	Pixelak izan behar dira
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Taulak

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

Grisen eskala koloreak

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

Azentu koloreak

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

Osagaiak

Botoiak

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

Formak

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

Inprimatu egoerak eta alertak

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

Nabigazio barra

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

Goitibeherak

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

Hero unitatea

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

Mixinei buruz

Oinarrizko nahasketak

Oinarrizko mixin bat CSS zati baten barne edo partziala da funtsean. CSS klase bat bezala idatzita daude eta edonon dei daitezke.

. elementu {
  . garbitu ();
}

Mixin parametrikoak

Mixin parametrikoa oinarrizko nahasketa bat bezalakoa da, baina parametroak ere onartzen ditu (hortik izena) aukerako balio lehenetsiekin.

. elementu {
  . ertza - erradioa ( 4px );
}

Gehitu erraz zeurea

Bootstrap-en mixin ia guztiak mixins.less-en gordetzen dira, tresna-kitaren .less fitxategietan mixin bat erabiltzeko aukera ematen dizun .less fitxategi erabilgarri zoragarri batean.

Beraz, aurrera eta erabili lehendik daudenak edo gehitu zurea behar duzun moduan.

Mixinak barne

Utilitateak

Mixin	Parametroak	Erabilera
`.clearfix()`	bat ere ez	Gehitu edozein gurasori barruko karroza garbitzeko
`.tab-focus()`	bat ere ez	Aplikatu Webkit foku estiloa eta Firefox-en eskema biribila
`.center-block()`	bat ere ez	Zentratu automatikoki bloke-mailako elementu bat erabiliz`margin: auto`
`.ie7-inline-block()`	bat ere ez	Erabili ohikoaz gain `display: inline-block`IE7 laguntza lortzeko
`.size()`	`@height @width`	Ezarri bizkor altuera eta zabalera lerro batean
`.square()`	`@size`	`.size()`Zabalera eta altuera balio berdina ezartzeko eraikitzen da
`.opacity()`	`@opacity`	Ezarri, zenbaki osoetan, opakutasun-ehunekoa (adibidez, "50" edo "75")

Formak

Mixin	Parametroak	Erabilera
`.placeholder()`	`@color: @placeholderText`	Ezarri `placeholder`testuaren kolorea sarreretarako

Tipografia

Mixin	Parametroak	Erabilera
`#font > #family > .serif()`	bat ere ez	Egin elementu bat serif letra-tipo pila bat erabiltzea
`#font > #family > .sans-serif()`	bat ere ez	Egin elementu bati sans-serif letra-tipo pila bat erabiltzea
`#font > #family > .monospace()`	bat ere ez	Egin elementu bati espazio bakarreko letra-tipo pila bat erabiltzea
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Erraz ezarri letra-tamaina, pisua eta lehena
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ezarri letra-tipo-familia serif gisa, eta kontrolatu tamaina, pisua eta lehen lerroa
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ezarri letra-tipo-familia sans-serif-ean, eta kontrolatu tamaina, pisua eta hasiera
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ezarri letra-tipo-familia espazio bakarrean eta kontrolatu tamaina, pisua eta hasierako lerroak

Sare sistema

Mixin	Parametroak	Erabilera
`.container-fixed()`	bat ere ez	Sortu horizontalki zentratutako edukiontzi bat zure edukia edukitzeko
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Sortu pixel-sare-sistema (edukiontzia, errenkada eta zutabeak) n zutabe eta x pixel zabaleko erretenarekin
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Sortu ehuneko sareta sistema bat n zutabeekin eta % x erretena zabalarekin
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Sortu elementuen pixel-sare sistema `input`, betegarritasuna eta ertzak kontuan hartuta
`.makeColumn`	`@columns: 1, @offset: 0`	Bihurtu edozein `div`sareko zutabe batean `.span*`klaserik gabe

CSS3 propietateak

Mixin	Parametroak	Erabilera
`.border-radius()`	`@radius`	Elementu baten ertzak biribildu. Balio bakarra edo zuriunez bereizita dauden lau balio izan daitezke
`.box-shadow()`	`@shadow`	Gehitu itzala elementu bati
`.transition()`	`@transition`	Gehitu CSS3 trantsizio efektua (adibidez, `all .2s linear`)
`.rotate()`	`@degrees`	Biratu elementu bat n gradu
`.scale()`	`@ratio`	Eskalatu elementu bat bere jatorrizko tamaina n aldiz
`.translate()`	`@x, @y`	Mugitu elementu bat x eta y planoetan
`.background-clip()`	`@clip`	Moztu elementu baten atzeko planoa (erabilgarria `border-radius`)
`.background-size()`	`@size`	Kontrolatu atzeko planoko irudien tamaina CSS3 bidez
`.box-sizing()`	`@boxmodel`	Aldatu elementu baten koadroaren eredua (adibidez, `border-box`zabalera osorako `input`)
`.user-select()`	`@select`	Kontrolatu kurtsorearen hautaketa orrialde batean
`.backface-visibility()`	`@visibility: visible`	Saihestu edukiaren keinuka CSS 3D eraldaketak erabiltzean
`.resizable()`	`@direction: both`	Egin edozein elementu tamaina aldagarria eskuinaldean eta behean
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Egin edozein elementuren edukiak CSS3 zutabeak erabiltzea
`.hyphens()`	`@mode: auto`	CSS3 marrazketa nahi duzunean (barne `word-wrap: break-word`)

Hondoak eta gradienteak

Mixin	Parametroak	Erabilera
`#translucent > .background()`	`@color: @white, @alpha: 1`	Eman elementu bati atzeko planoaren kolore zeharrargia
`#translucent > .border()`	`@color: @white, @alpha: 1`	Eman elementu bati ertz kolore zeharrargia
`#gradient > .vertical()`	`@startColor, @endColor`	Sortu arakatzaileen arteko atzeko planoko gradiente bertikala
`#gradient > .horizontal()`	`@startColor, @endColor`	Sortu arakatzaile zeharkako atzeko planoko gradiente horizontala
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Sortu arakatzaile zeharkako norabideko atzeko planoko gradientea
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Sortu arakatzaile zeharkako hiru koloreko atzeko planoko gradientea
`#gradient > .radial()`	`@innerColor, @outerColor`	Sortu arakatzaile zeharkako atzeko planoko gradiente erradiala
`#gradient > .striped()`	`@color, @angle`	Sortu arakatzaile zeharkako marradun atzeko planoko gradientea
`#gradientBar()`	`@primaryColor, @secondaryColor`	Botoietarako erabiltzen da gradientea eta ertz apur bat ilunagoa esleitzeko

Oharra: GitHub-i tira-eskaera bat bidaltzen ari bazara CSS aldatuarekin, CSS-a berriro konpilatu behar duzu metodo hauetako edozeinen bidez.

Konpilatzeko tresnak

Makefiledun nodoa

Instalatu LESS komando-lerroko konpilatzailea, JSHint, Recess eta uglify-js globalki npm-rekin komando hau exekutatuz:

$ npm instalatu -g gutxiago jshint recess uglify-js

Instalatu ondoren, exekutatu makezure bootstrap direktorioaren errotik eta prest zaude.

Gainera, watchr instalatuta baduzu, make watchbootstrap automatikoki berreraikitzeko exekutatu dezakezu bootstrap lib-eko fitxategi bat editatzen duzun bakoitzean (hau ez da beharrezkoa, erosotasun metodo bat besterik ez).

Komando-lerroa

Instalatu LESS komando lerroko tresna Node bidez eta exekutatu komando hau:

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

Ziurtatu --compresskomando horretan sartzen duzula byte batzuk gordetzen saiatzen ari bazara!

Javascript

Deskargatu azken Less.js eta sartu haren bidea (eta Bootstrap) <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less fitxategiak berriro konpilatzeko, gorde itzazu eta berriro kargatu orria. Less.js-ek konpilatu egiten ditu eta tokiko biltegian gordetzen ditu.

Mac aplikazio ez ofiziala

Mac aplikazio ez-ofizialak .less fitxategien direktorioak ikusten ditu eta kodea fitxategi lokaletan konpilatzen du ikusitako .less fitxategi bat gorde ondoren.

Nahi baduzu, aplikazioan hobespenak alda ditzakezu txikitze automatikorako eta konpilatutako fitxategiak zein direktoriotan amaitzen diren.

GUTXIAGOrekin eraikia

Zergatik GUTXIAGO?

Zer sartzen da?

Gehiago ikasi

Aldagaiak

Mixinak

Eragiketak

Bootstrap aldagaiak LESS aldagaiak, haien balioak eta erabilera-jarraibideak

Aldamioak eta loturak

Sare sistema

Tipografia

Taulak

Grisen eskala koloreak

Azentu koloreak

Osagaiak

Botoiak

Formak

Inprimatu egoerak eta alertak

Nabigazio barra

Goitibeherak

Hero unitatea

Bootstrap nahasketak

Mixinei buruz

Oinarrizko nahasketak

Mixin parametrikoak

Gehitu erraz zeurea

Mixinak barne

Utilitateak

Formak

Tipografia

Sare sistema

CSS3 propietateak

Hondoak eta gradienteak

Bootstrap LESS-ekin konpilatzen

Konpilatzeko tresnak

Makefiledun nodoa

Komando-lerroa

Javascript

Mac aplikazio ez ofiziala

Mac aplikazio gehiago

Kruska

CodeKit

Sinplea