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

MENEJ CSS

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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.

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

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.

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

Ľ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 pomocoumargin: auto
.ie7-inline-block() žiadny Použite okrem bežných display: inline-blockna 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 placeholderfarbu 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 systém percentuálnej mriežky s n stĺpmi a x % širokým odkvapom
#grid > .input() @gridColumnWidth, @gridGutterWidth Vytvorte systém pixelovej mriežky pre inputprvky, zohľadňujúci výplň a okraje
.makeColumn @columns: 1, @offset: 0 Premeňte ľubovoľné divna 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-boxna 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
.hyphens() @mode: auto Delenie slov CSS3, keď ho chcete (zahŕňa word-wrap: break-word)

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, JSHint, Recess a uglify-js globálne pomocou npm spustením nasledujúceho príkazu:

$ npm install -g less jshint reccess 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.

Viac aplikácií pre Mac

Crunch

Crunch je skvele vyzerajúci editor a kompilátor LESS postavený na Adobe Air.

CodeKit

CodeKit, ktorý vytvoril ten istý človek ako neoficiálnu aplikáciu pre Mac, je aplikácia pre Mac, ktorá kompiluje LESS, SASS, Stylus a CoffeeScript.

Jednoduchosť

Aplikácia pre Mac, Linux a PC na kompiláciu MENEJ súborov pomocou myši. Zdrojový kód je navyše na GitHub .