Uporaba LESS z Bootstrapom

Prilagodite in razširite Bootstrap z LESS , predprocesorjem CSS, da izkoristite spremenljivke, mixine in drugo, ki se uporablja za izdelavo Bootstrapovega CSS.

Zakaj MANJ?

Bootstrap je narejen z LESS v svojem jedru, dinamičnim jezikom slogov, ki ga je ustvaril naš dober prijatelj Alexis Sellier . Omogoča hitrejši, lažji in zabavnejši razvoj sistemskega CSS.

Kaj je vključeno?

Kot razširitev CSS-ja LESS vključuje spremenljivke, mešanice za večkratno uporabne delčke kode, operacije za preprosto matematiko, gnezdenje in celo barvne funkcije.

Nauči se več

MANJ CSS

Za več informacij obiščite uradno spletno stran http://lesscss.org/ .

Spremenljivke

Upravljanje barv in vrednosti slikovnih pik v CSS je lahko nekoliko mučno, običajno polno kopiranja in lepljenja. Vendar ne z LESS – dodelite barve ali vrednosti slikovnih pik kot spremenljivke in jih enkrat spremenite.

Mixins

Tiste tri deklaracije polmera obrobe, ki jih morate narediti v običajnem starem CSS? Zdaj so omejeni na eno vrstico s pomočjo mixinov, odrezkov kode, ki jih lahko znova uporabite kjer koli.

Operacije

Naredite svojo mrežo, vodilo in bolj prilagodljivo tako, da sproti računate z operacijami. Množite, delite, seštevajte in odštevajte svojo pot do razumnosti CSS.

Odri in povezave

@bodyBackground @white Barva ozadja strani
@textColor @grayDark Privzeta barva besedila za celotno telo, naslove in drugo
@linkColor #08c Privzeta barva besedila povezave
@linkColorHover darken(@linkColor, 15%) Privzeta barva besedila povezave

Mrežni sistem

@gridColumns 12
@gridColumnWidth 60 slikovnih pik
@gridGutterWidth 20 slikovnih pik
@fluidGridColumnWidth 6,382978723 %
@fluidGridGutterWidth 2,127659574 %

Tipografija

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Courier New", monospace
@baseFontSize 13px Morajo biti slikovne pike
@baseFontFamily @sansFontFamily
@baseLineHeight 18 slikovnih pik Morajo biti slikovne pike
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Mize

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

Sivine barve

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

Poudarjene barve

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

Komponente

Gumbi

@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

Obrazci

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

Oblikujte stanja in opozorila

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

Navbar

@navbarHeight 40 slikovnih pik
@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

Spustni meniji

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

Herojska enota

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

O miksinih

Osnovni miksini

Osnovni mixin je v bistvu vključitev ali del za delček CSS. Napisani so tako kot razred CSS in jih je mogoče poklicati kjer koli.

  1. . element {
  2. . clearfix ();
  3. }

Parametrične mešanice

Parametrični mixin je tako kot osnovni mixin, vendar sprejema tudi parametre (od tod tudi ime) z neobveznimi privzetimi vrednostmi.

  1. . element {
  2. . obroba - polmer ( 4px );
  3. }

Preprosto dodajte svoje

Skoraj vsi Bootstrapovi miksini so shranjeni v mixins.less, čudoviti uporabniški datoteki .less, ki vam omogoča uporabo miksinov v kateri koli od datotek .less v kompletu orodij.

Torej, nadaljujte in uporabite obstoječe ali pa po potrebi dodajte svoje.

Vključeni miksini

Pripomočki

Mixin Parametri Uporaba
.clearfix() nič Dodajte kateremu koli nadrejenemu elementu, da počistite lebdeče znotraj
.tab-focus() nič Uporabite slog fokusa Webkit in zaokrožite oris Firefoxa
.center-block() nič Samodejno centriranje elementa na ravni bloka z uporabomargin: auto
.ie7-inline-block() nič Uporabite poleg običajnega display: inline-block, da dobite podporo za IE7
.size() @height @width Hitro nastavite višino in širino v eni vrstici
.square() @size Nadgrajuje .size()za nastavitev širine in višine kot enake vrednosti
.opacity() @opacity V celih številih nastavite odstotek motnosti (npr. "50" ali "75")

Obrazci

Mixin Parametri Uporaba
.placeholder() @color: @placeholderText Nastavite placeholderbarvo besedila za vnose

Tipografija

Mixin Parametri Uporaba
#font > #family > .serif() nič Naj element uporablja sklad serifnih pisav
#font > #family > .sans-serif() nič Naj element uporablja sklad pisav sans-serif
#font > #family > .monospace() nič Naj element uporablja sklad pisav z enoprostornim prostorom
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Preprosto nastavite velikost pisave, težo in vodilo
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Nastavite družino pisav na serif in nadzirajte velikost, težo in vodilo
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Nastavite družino pisav na sans-serif in nadzirajte velikost, težo in vodilo
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Nastavite družino pisav na monospace in nadzirajte velikost, težo in vodilo

Mrežni sistem

Mixin Parametri Uporaba
.container-fixed() nič Ustvarite vodoravno centrirano posodo za shranjevanje vaše vsebine
#grid > .core() @gridColumnWidth, @gridGutterWidth Ustvarite sistem mreže slikovnih pik (vsebnik, vrstica in stolpci) z n stolpci in x slikovnih pik širokim žlebom
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Ustvarite odstotni mrežni sistem z n stolpci in x % širokim žlebom
#grid > .input() @gridColumnWidth, @gridGutterWidth Ustvarite sistem mreže slikovnih pik za inputelemente, pri čemer upoštevajte oblazinjenje in obrobe
.makeColumn @columns: 1, @offset: 0 Poljubno divspremenite v stolpec mreže brez .span*razredov

lastnosti CSS3

Mixin Parametri Uporaba
.border-radius() @radius Zaokrožite vogale elementa. Lahko je ena vrednost ali štiri vrednosti, ločene s presledki
.box-shadow() @shadow Dodajte senco elementu
.transition() @transition Dodajte učinek prehoda CSS3 (npr. all .2s linear)
.rotate() @degrees Zavrtite element za n stopinj
.scale() @ratio Povečaj element na n -kratno prvotno velikost
.translate() @x, @y Premaknite element na ravnini x in y
.background-clip() @clip Obrežite ozadje elementa (uporabno za border-radius)
.background-size() @size Nadzorujte velikost slik ozadja prek CSS3
.box-sizing() @boxmodel Spremenite model polja za element (npr. border-boxza polno širino input)
.user-select() @select Nadzor izbire besedila s kazalcem na strani
.backface-visibility() @visibility: visible Preprečite utripanje vsebine pri uporabi 3D transformacij CSS
.resizable() @direction: both Poljubnemu elementu spremenite velikost na desni in spodnji strani
.content-columns() @columnCount, @columnGap: @gridGutterWidth Naj vsebina katerega koli elementa uporablja stolpce CSS3
.hyphens() @mode: auto Deljenje CSS3, kadar želite (vključuje word-wrap: break-word)

Ozadja in prelivi

Mixin Parametri Uporaba
#translucent > .background() @color: @white, @alpha: 1 Elementu dajte prosojno barvo ozadja
#translucent > .border() @color: @white, @alpha: 1 Elementu dajte prosojno barvo obrobe
#gradient > .vertical() @startColor, @endColor Ustvarite navpični preliv ozadja med brskalniki
#gradient > .horizontal() @startColor, @endColor Ustvarite vodoravni preliv ozadja med brskalniki
#gradient > .directional() @startColor, @endColor, @deg Ustvarite usmerjeni preliv ozadja med brskalniki
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Ustvarite tribarvni preliv ozadja med brskalniki
#gradient > .radial() @innerColor, @outerColor Ustvarite radialni preliv ozadja med brskalniki
#gradient > .striped() @color, @angle Ustvarite preliv črtastega ozadja med brskalniki
#gradientBar() @primaryColor, @secondaryColor Uporablja se za gumbe za dodelitev preliva in nekoliko temnejše obrobe
Opomba: Če pošiljate zahtevo za vlečenje GitHubu s spremenjenim CSS, morate znova prevesti CSS s katero koli od teh metod.

Orodja za prevajanje

Vozlišče z makefile

Namestite prevajalnik ukazne vrstice LESS, JSHint, Recess in uglify-js globalno z npm tako, da zaženete naslednji ukaz:

$ npm install -g less jshint recess uglify-js

Po namestitvi samo zaženite makeiz korena svojega zagonskega imenika in vse je pripravljeno.

Poleg tega, če imate nameščen watchr , lahko zaženete make watch, da se bootstrap samodejno znova zgradi vsakič, ko uredite datoteko v bootstrap lib (to ni obvezno, le priročna metoda).

Ukazna vrstica

Namestite orodje ukazne vrstice LESS prek Node in zaženite naslednji ukaz:

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

Ne pozabite vključiti --compressv ta ukaz, če poskušate shraniti nekaj bajtov!

Javascript

Prenesite najnovejši Less.js in vključite pot do njega (in Bootstrap) v <head>.

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

Če želite znova prevesti datoteke .less, jih preprosto shranite in znova naložite stran. Less.js jih prevede in shrani v lokalno shrambo.

Neuradna aplikacija za Mac

Neuradna aplikacija za Mac spremlja imenike datotek .less in prevaja kodo v lokalne datoteke po vsakem shranjevanju opazovane datoteke .less.

Če želite, lahko v aplikaciji preklapljate med nastavitvami za samodejno pomanjševanje in v kateri imenik končajo prevedene datoteke.

Več aplikacij za Mac

Hrustanje

Crunch je odličen LESS urejevalnik in prevajalnik, zgrajen na Adobe Air.

CodeKit

CodeKit, ki ga je ustvaril isti človek kot neuradno aplikacijo za Mac, je aplikacija za Mac, ki prevaja LESS, SASS, Stylus in CoffeeScript.

Enostavno

Aplikacija za Mac, Linux in PC za prevajanje povleci in spusti datotek LESS. Poleg tega je izvorna koda na GitHubu .