Použití LESS s Bootstrap
Přizpůsobte a rozšiřte Bootstrap pomocí LESS , preprocesoru CSS, abyste využili výhody proměnných, mixinů a dalších, které se používají k sestavení CSS Bootstrapu.
Postaveno s MÉNĚ
Proč MÉNĚ?
Bootstrap je vyroben s LESS ve svém jádru, dynamickým stylem jazykem vytvořeným naším dobrým přítelem Alexisem Sellierem . Díky tomu je vývoj systémových CSS rychlejší, jednodušší a zábavnější.
Co je zahrnuto?
LESS jako rozšíření CSS zahrnuje proměnné, mixiny pro opakovaně použitelné úryvky kódu, operace pro jednoduchou matematiku, vnořování a dokonce i barevné funkce.
Proměnné
Správa barev a hodnot pixelů v CSS může být trochu náročná, obvykle plná kopírování a vkládání. Nikoli však s LESS – přiřaďte barvy nebo hodnoty pixelů jako proměnné a jednou je změňte.
Mixins
Tyto tři deklarace hraničního poloměru musíte udělat v běžném CSS? Nyní jsou na jednom řádku pomocí mixinů, úryvků kódu, které můžete znovu použít kdekoli.
Operace
Udělejte svou mřížku, vedení a superflexibilitu tím, že budete počítat operace za běhu. Násobením, dělením, sčítáním a odečítáním se dostanete do CSS zdravého rozumu.
Zaváděcí proměnné LESS proměnné, jejich hodnoty a pokyny k použití
Hypertextové odkazy
@linkColor |
#08c | Výchozí barva textu odkazu | |
@linkColorHover |
darken(@linkColor, 15%) |
Výchozí barva textu odkazu |
Mřížkový systém
@gridColumns |
12 |
@gridColumnWidth |
60 pixelů |
@gridGutterWidth |
20 pixelů |
@fluidGridColumnWidth |
6,382978723 % |
@fluidGridGutterWidth |
2,127659574 % |
Typografie
@baseFontSize |
13 pixelů | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
Barvy ve stupních šedi
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Akcentní barvy
@blue |
#049 cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Komponenty
Tlačítka
@primaryButtonBackground |
@linkColor |
formuláře
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40 pixelů | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Stavy formulářů a výstrahy
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixiny
O mixinech
Základní mixy
Základní mixin je v podstatě součástí úryvku CSS nebo jeho část. Jsou napsány stejně jako třída CSS a lze je volat kdekoli.
- . prvek {
- . clearfix ();
- }
Parametrické mixiny
Parametrický mixin je stejně jako základní mixin, ale také přijímá parametry (odtud název) s volitelnými výchozími hodnotami.
- . prvek {
- . border - radius ( 4px );
- }
Snadno přidejte vlastní
Téměř všechny mixiny Bootstrapu jsou uloženy v mixins.less, skvělém utilitním souboru .less, který vám umožňuje použít mixin v kterémkoli ze souborů .less v sadě nástrojů.
Takže pokračujte a použijte ty stávající, nebo si klidně přidejte své vlastní, jak potřebujete.
Zahrnuty mixiny
Utility
| Mixin | Parametry | Používání |
|---|---|---|
.clearfix() |
žádný | Přidejte k libovolnému nadřazenému prvku, chcete-li v něm vymazat plovoucí položky |
.tab-focus() |
žádný | Použijte styl zaměření Webkit a zaoblený obrys Firefoxu |
.center-block() |
žádný | Automaticky vycentrovat prvek na úrovni bloku pomocímargin: auto |
.ie7-inline-block() |
žádný | Použijte kromě běžného display: inline-blockk získání podpory IE7 |
.size() |
@height: 5px, @width: 5px |
Rychle nastavte výšku a šířku na jednom řádku |
.square() |
@size: 5px |
Staví na .size()nastavení šířky a výšky na stejnou hodnotu |
.opacity() |
@opacity: 100 |
Nastavte v celých číslech procento krytí (např. "50" nebo "75") |
formuláře
| Mixin | Parametry | Používání |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Nastavte placeholderbarvu textu pro vstupy |
Typografie
| Mixin | Parametry | Používání |
|---|---|---|
#font > #family > .serif() |
žádný | Udělejte z prvku sadu patkových písem |
#font > #family > .sans-serif() |
žádný | Udělejte z prvku sadu bezpatkových písem |
#font > #family > .monospace() |
žádný | Nastavte prvek, aby používal jednoprostorový zásobník písem |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Snadno nastavte velikost, váhu a proklad písma |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Nastavte rodinu písem na patku a ovládejte velikost, váhu a proklad |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Nastavte rodinu písem na bezpatkové a ovládejte velikost, váhu a proklad |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Nastavte rodinu písem na jednoprostorové a ovládejte velikost, váhu a proklad |
Mřížkový systém
| Mixin | Parametry | Používání |
|---|---|---|
.container-fixed() |
žádný | Poskytněte kontejner s pevnou šířkou (nastavený s @siteWidth) pro uložení vašeho obsahu |
.columns() |
@columns: 1 |
Vytvořte sloupec mřížky, který zahrnuje libovolný počet sloupců (výchozí nastavení je 1 sloupec) |
.offset() |
@columns: 1 |
Odsazení sloupce mřížky s levým okrajem, který zahrnuje libovolný počet sloupců |
.gridColumn() |
žádný | Nechte prvek plavat jako sloupec mřížky |
vlastnosti CSS3
| Mixin | Parametry | Používání |
|---|---|---|
.border-radius() |
@radius: 5px |
Zaoblení rohů prvku. Může to být jedna hodnota nebo čtyři hodnoty oddělené mezerou |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Přidejte k prvku vržený stín |
.transition() |
@transition |
Přidat přechodový efekt CSS3 (např. all .2s linear) |
.rotate() |
@degrees |
Otočte prvek o n stupňů |
.scale() |
@ratio |
Měřítko prvku na nkrát jeho původní velikost |
.translate() |
@x: 0, @y: 0 |
Přesuňte prvek na rovinách x a y |
.background-clip() |
@clip |
Oříznutí pozadí prvku (užitečné pro border-radius) |
.background-size() |
@size |
Ovládejte velikost obrázků na pozadí pomocí CSS3 |
.box-sizing() |
@boxmodel |
Změnit model krabice pro prvek (např. border-boxpro plnou šířku input) |
.user-select() |
@select |
Ovládejte výběr textu na stránce kurzorem |
.resizable() |
@direction: both |
Upravte velikost libovolného prvku vpravo a dole |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Vytvořte obsah libovolného prvku pomocí sloupců CSS3 |
Pozadí a přechody
| Mixin | Parametry | Používání |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Dejte prvku průsvitnou barvu pozadí |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Dejte prvku průsvitnou barvu ohraničení |
.#gradient > .vertical() |
@startColor, @endColor |
Vytvořte svislý přechod pozadí napříč prohlížečem |
.#gradient > .horizontal() |
@startColor, @endColor |
Vytvořte horizontální přechod pozadí napříč prohlížeči |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Vytvořte směrový přechod pozadí napříč prohlížečem |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Vytvořte tříbarevný přechod na pozadí napříč prohlížeči |
.#gradient > .radial() |
@innerColor, @outerColor |
Vytvořte radiální přechod pozadí napříč prohlížeči |
.#gradient > .striped() |
@color, @angle |
Vytvořte pruhovaný přechod pozadí napříč prohlížeči |
.#gradientBar() |
@primaryColor, @secondaryColor |
Používá se pro tlačítka k přiřazení přechodu a mírně tmavšího okraje |
Kompilace Bootstrap s LESS
Nástroje pro kompilaci
Uzel s makefile
Nainstalujte kompilátor příkazového řádku LESS s npm spuštěním následujícího příkazu:
$ npm nainstalovat méně
Po instalaci stačí spustit makez kořenového adresáře vašeho bootstrap adresáře a je vše připraveno.
Navíc, pokud máte nainstalovaný watchr , můžete spustit make watch, aby se bootstrap automaticky přestavěl pokaždé, když upravíte soubor v bootstrap lib (toto není vyžadováno, pouze pohodlný způsob).
Příkazový řádek
Nainstalujte nástroj příkazového řádku LESS přes Node a spusťte následující příkaz:
$ lessc ./lib/bootstrap.less > bootstrap.css
--compressPokud se pokoušíte ušetřit nějaké bajty , nezapomeňte tento příkaz zahrnout !
Javascript
Stáhněte si nejnovější Less.js a zahrňte cestu k němu (a Bootstrap) do souboru <head>.
<link rel = "stylesheet/less" href = "/cesta/k/bootstrap.less" > <script src = "/cesta/k/méně.js" ></script>
Chcete-li znovu zkompilovat soubory .less, stačí je uložit a znovu načíst stránku. Less.js je zkompiluje a uloží do místního úložiště.
Neoficiální aplikace pro Mac
Neoficiální aplikace pro Mac sleduje adresáře souborů .less a kompiluje kód do místních souborů po každém uložení sledovaného souboru .less.
Pokud chcete, můžete v aplikaci přepínat předvolby pro automatickou minifikaci a ve kterém adresáři kompilované soubory skončí.
Další aplikace pro Mac
Crunch
Crunch je skvěle vypadající LESS editor a kompilátor postavený na Adobe Air.
CodeKit
CodeKit, vytvořený stejným člověkem jako neoficiální aplikace pro Mac, je aplikace pro Mac, která kompiluje LESS, SASS, Stylus a CoffeeScript.
Jednoduché
Aplikace pro Mac, Linux a PC pro kompilaci MÉNĚ souborů přetažením. Zdrojový kód je navíc na GitHubu .