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.
Postavené s MENEJ
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.
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.
Bootstrap premenné LESS premenné, ich hodnoty a pokyny na použitie
Hypertextové odkazy
@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
@baseFontSize |
13 pixelov |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18 pixelov |
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á
@primaryButtonBackground |
@linkColor |
Formuláre
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40 pixelov | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Stavy formulárov a upozornenia
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixíny
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 pomocoumargin: auto |
.ie7-inline-block() |
žiadny | Použite okrem bežných display: inline-blockna získanie podpory IE7 |
.size() |
@height: 5px, @width: 5px |
Rýchlo nastavte výšku a šírku na jednom riadku |
.square() |
@size: 5px |
Nadväzuje na .size()nastavenie šírky a výšky na rovnakú hodnotu |
.opacity() |
@opacity: 100 |
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 precentný mriežkový systém s n stĺpmi a x % širokým odkvapom |
vlastnosti CSS3
| Miešanie | Parametre | Použitie |
|---|---|---|
.border-radius() |
@radius: 5px |
Zaoblete rohy prvku. Môže to byť jedna hodnota alebo štyri hodnoty oddelené medzerou |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Urobte ľubovoľný prvok s možnosťou zmeny veľkosti vpravo a dole |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
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 |
Kompilácia Bootstrap s LESS
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 ./lib/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 .