Používanie LESS s Bootstrap

Prispôsobte a rozšírte Bootstrap pomocou LESS , preprocesora CSS, aby ste využili výhody premenných, mixov a ďalších, ktoré sa používajú na zostavenie CSS Bootstrapu.

Prečo MENEJ?

Bootstrap je vyrobený s LESS v jeho jadre, dynamickým štýlom jazyka, ktorý vytvoril náš dobrý priateľ Alexis Sellier . Vďaka tomu je vývoj systémov CSS rýchlejší, jednoduchší a zábavnejší.

Čo je zahrnuté?

Ako rozšírenie CSS obsahuje LESS premenné, mixiny pre opakovane použiteľné úryvky kódu, operácie pre jednoduchú matematiku, vnorenie a dokonca aj farebné funkcie.

Uč sa viac

Navštívte oficiálnu webovú stránku http://lesscss.org/ a dozviete sa viac.

Premenné

Správa farieb a hodnôt pixelov v CSS môže byť trochu trápna, zvyčajne plná kopírovania a vkladania. Nie však s MENEJ – priraďte farby alebo hodnoty pixelov ako premenné a zmeňte ich raz.

Mixins

Tieto tri deklarácie o polomere hraníc musíte urobiť v bežnom CSS? Teraz sú na jednom riadku pomocou mixinov, útržkov kódu, ktoré môžete znova použiť kdekoľvek.

Operácie

Urobte svoju mriežku, vedenie a superflexibilitu tým, že budete počítať s operáciami za behu. Vynásobte, rozdeľte, sčítajte a odčítajte svoju cestu k zdravému rozumu CSS.

Lešenie a odkazy

`@bodyBackground`	`@white`	Farba pozadia stránky
`@textColor`	`@grayDark`	Predvolená farba textu pre celé telo, nadpisy a ďalšie položky
`@linkColor`	`#08c`	Predvolená farba textu odkazu
`@linkColorHover`	`darken(@linkColor, 15%)`	Predvolená farba textu odkazu

Mriežkový systém

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

Typografia

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, bezpätkové
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13 pixelov	Musí ísť o pixely
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18 pixelov	Musí ísť o pixely
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabuľky

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

Farby v odtieňoch šedej

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

Akcentové farby

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

Komponenty

Tlačidlá

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

Formuláre

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

Stavy formulárov a upozornenia

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

Navbar

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

Rozbaľovacie ponuky

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

Jednotka hrdinu

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

O mixinoch

Základné zmesi

Základný mix je v podstate zahrnutý alebo čiastočný pre úryvok CSS. Sú napísané rovnako ako trieda CSS a dajú sa volať kdekoľvek.

. prvok {
  . clearfix ();
}

Parametrické mixíny

Parametrický mix je rovnako ako základný mixin, ale akceptuje aj parametre (odtiaľ názov) s voliteľnými predvolenými hodnotami.

. prvok {
  . okraj - polomer ( 4px );
}

Ľahko pridajte svoje vlastné

Takmer všetky mixiny Bootstrapu sú uložené v mixins.less, úžasnom utilitnom súbore .less, ktorý vám umožňuje použiť mixin v ktoromkoľvek zo súborov .less v súprave nástrojov.

Takže pokračujte a použite tie existujúce, alebo si podľa potreby pridajte svoje vlastné.

Zahrnuté mixíny

Verejné služby

Miešanie	Parametre	Použitie
`.clearfix()`	žiadny	Pridajte k ľubovoľnému rodičovi, aby ste vymazali plávajúce objekty
`.tab-focus()`	žiadny	Použite štýl zamerania Webkit a zaoblený obrys Firefoxu
`.center-block()`	žiadny	Automaticky vycentrovať prvok na úrovni bloku pomocou`margin: auto`
`.ie7-inline-block()`	žiadny	Použite okrem bežných `display: inline-block`na získanie podpory IE7
`.size()`	`@height @width`	Rýchlo nastavte výšku a šírku na jednom riadku
`.square()`	`@size`	Nadväzuje na `.size()`nastavenie šírky a výšky na rovnakú hodnotu
`.opacity()`	`@opacity`	Nastavte, v celých číslach, percento nepriehľadnosti (napr. "50" alebo "75")

Formuláre

Miešanie	Parametre	Použitie
`.placeholder()`	`@color: @placeholderText`	Nastavte `placeholder`farbu textu pre vstupy

Typografia

Miešanie	Parametre	Použitie
`#font > #family > .serif()`	žiadny	Urobte z prvku pätkové písmo
`#font > #family > .sans-serif()`	žiadny	Urobte z prvku zásobník bezpätkových písiem
`#font > #family > .monospace()`	žiadny	Urobte z prvku jednopriestorové písmo
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Jednoducho nastavte veľkosť písma, váhu a vodivosť
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nastavte rodinu písiem na pätku a ovládajte veľkosť, váhu a proklad
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nastavte rodinu písiem na bezpätkové a ovládajte veľkosť, váhu a proklad
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Nastavte rodinu písiem na jednopriestorové a ovládajte veľkosť, váhu a proklad

Mriežkový systém

Miešanie	Parametre	Použitie
`.container-fixed()`	žiadny	Vytvorte vodorovne vycentrovaný kontajner na uloženie obsahu
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Vytvorte pixelový mriežkový systém (kontajner, riadok a stĺpce) s n stĺpcami a x pixel širokým odkvapom
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Vytvorte precentný mriežkový systém s n stĺpmi a x % širokým odkvapom
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Vytvorte systém pixelovej mriežky pre `input`prvky, zohľadňujúci výplň a okraje
`.makeColumn`	`@columns: 1, @offset: 0`	Premeňte ľubovoľné `div`na stĺpec mriežky bez `.span*`tried

vlastnosti CSS3

Miešanie	Parametre	Použitie
`.border-radius()`	`@radius`	Zaoblete rohy prvku. Môže to byť jedna hodnota alebo štyri hodnoty oddelené medzerou
`.box-shadow()`	`@shadow`	Pridajte k prvku vrhnutý tieň
`.transition()`	`@transition`	Pridať prechodový efekt CSS3 (napr. `all .2s linear`)
`.rotate()`	`@degrees`	Otočte prvok o n stupňov
`.scale()`	`@ratio`	Zmenšiť veľkosť prvku na n -násobok jeho pôvodnej veľkosti
`.translate()`	`@x, @y`	Presuňte prvok na rovinách x a y
`.background-clip()`	`@clip`	Orezanie pozadia prvku (užitočné pre `border-radius`)
`.background-size()`	`@size`	Ovládajte veľkosť obrázkov na pozadí pomocou CSS3
`.box-sizing()`	`@boxmodel`	Zmeniť model krabice pre prvok (napr. `border-box`na celú šírku `input`)
`.user-select()`	`@select`	Ovládajte výber textu na stránke kurzorom
`.backface-visibility()`	`@visibility: visible`	Zabráňte blikaniu obsahu pri používaní transformácií CSS 3D
`.resizable()`	`@direction: both`	Urobte ľubovoľný prvok s možnosťou zmeny veľkosti vpravo a dole
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Urobte obsah ľubovoľného prvku pomocou stĺpcov CSS3

Pozadia a prechody

Miešanie	Parametre	Použitie
`#translucent > .background()`	`@color: @white, @alpha: 1`	Dajte prvku priesvitnú farbu pozadia
`#translucent > .border()`	`@color: @white, @alpha: 1`	Dajte prvku priesvitnú farbu okraja
`#gradient > .vertical()`	`@startColor, @endColor`	Vytvorte prechod vertikálneho pozadia naprieč prehliadačmi
`#gradient > .horizontal()`	`@startColor, @endColor`	Vytvorte horizontálny prechod pozadia naprieč prehliadačmi
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Vytvorte smerový prechod pozadia naprieč prehliadačmi
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Vytvorte trojfarebný gradient pozadia naprieč prehliadačmi
`#gradient > .radial()`	`@innerColor, @outerColor`	Vytvorte radiálny prechod pozadia naprieč prehliadačmi
`#gradient > .striped()`	`@color, @angle`	Vytvorte prechod pruhovaného pozadia naprieč prehliadačmi
`#gradientBar()`	`@primaryColor, @secondaryColor`	Používa sa pre tlačidlá na priradenie prechodu a mierne tmavšieho okraja

Poznámka: Ak odosielate požiadavku na stiahnutie na GitHub s upraveným CSS, musíte CSS prekompilovať pomocou ktorejkoľvek z týchto metód.

Nástroje na zostavovanie

Uzol s makefile

Nainštalujte kompilátor príkazového riadka LESS a uglify-js globálne pomocou npm spustením nasledujúceho príkazu:

$ npm install -g less uglify-js

Po inštalácii stačí spustiť makez koreňového adresára bootstrap adresára a všetko je nastavené.

Okrem toho, ak máte nainštalovaný watchr , môžete spustiť make watch, aby sa bootstrap automaticky prebudoval zakaždým, keď upravíte súbor v bootstrap lib (nie je to povinné, len pohodlný spôsob).

Príkazový riadok

Nainštalujte nástroj príkazového riadka LESS cez Node a spustite nasledujúci príkaz:

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

--compressAk sa pokúšate ušetriť nejaké bajty , nezabudnite to zahrnúť do tohto príkazu!

Javascript

Stiahnite si najnovší Less.js a zahrňte cestu k nemu (a Bootstrap) do súboru <head>.

<link rel = "stylesheet/less" href = "/cesta/k/bootstrap.less" > <script src = "/cesta/k/menej.js" ></script>

Ak chcete prekompilovať súbory .less, stačí ich uložiť a znova načítať stránku. Less.js ich skompiluje a uloží do lokálneho úložiska.

Neoficiálna aplikácia pre Mac

Neoficiálna aplikácia pre Mac sleduje adresáre súborov .less a kompiluje kód do lokálnych súborov po každom uložení sledovaného súboru .less.

Ak chcete, môžete v aplikácii prepínať predvoľby na automatické minifikovanie a v ktorom adresári skončia kompilované súbory.

Postavené s MENEJ

Prečo MENEJ?

Čo je zahrnuté?

Uč sa viac

Premenné

Mixins

Operácie

Bootstrap premenné LESS premenné, ich hodnoty a pokyny na použitie

Lešenie a odkazy

Mriežkový systém

Typografia

Tabuľky

Farby v odtieňoch šedej

Akcentové farby

Komponenty

Tlačidlá

Formuláre

Stavy formulárov a upozornenia

Navbar

Rozbaľovacie ponuky

Jednotka hrdinu

Bootstrap mixíny

O mixinoch

Základné zmesi

Parametrické mixíny

Ľahko pridajte svoje vlastné

Zahrnuté mixíny

Verejné služby

Formuláre

Typografia

Mriežkový systém

vlastnosti CSS3

Pozadia a prechody

Kompilácia Bootstrap s LESS

Nástroje na zostavovanie

Uzol s makefile

Príkazový riadok

Javascript

Neoficiálna aplikácia pre Mac

Viac aplikácií pre Mac

Crunch

CodeKit

Jednoduchosť