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

CSS GUTXIAGO

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.

  1. . elementu {
  2. . garbitu ();
  3. }

Mixin parametrikoak

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

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

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 erabilizmargin: auto
.ie7-inline-block() bat ere ez Erabili ohikoaz gain display: inline-blockIE7 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 placeholdertestuaren 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 divsareko 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-boxzabalera 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.

Mac aplikazio gehiago

Kruska

Crunch Adobe Air-en eraikitako LESS editore eta konpilatzaile bikaina da.

CodeKit

Mac aplikazio ez-ofizialaren tipo berak sortua, CodeKit LESS, SASS, Stylus eta CoffeeScript konpilatzen dituen Mac aplikazioa da.

Sinplea

Mac, Linux eta PC aplikazioa LESS fitxategiak arrastatu eta jaregiteko. Gainera, iturburu kodea GitHub-en dago .