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.

Proč MÉNĚ?

Bootstrap je vyroben s LESS v jeho jádru, dynamický jazyk stylů vytvořený 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?

Jako rozšíření CSS obsahuje LESS proměnné, mixiny pro opakovaně použitelné úryvky kódu, operace pro jednoduchou matematiku, vnořování a dokonce i barevné funkce.

Zjistěte více

Navštivte oficiální webovou stránku http://lesscss.org/ a dozvíte se více.

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 dosáhnete CSS zdravého rozumu.

Lešení a odkazy

`@bodyBackground`	`@white`	Barva pozadí stránky
`@textColor`	`@grayDark`	Výchozí barva textu pro celé tělo, nadpisy a další
`@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

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, "Courier New", monospace
`@baseFontSize`	13px	Musí to být pixely
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Musí to být pixely
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Tabulky

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

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

`@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áře

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

Stavy formulářů a výstrahy

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

Navbar

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

Rozbalovací seznamy

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

Jednotka hrdiny

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

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-block`k získání podpory IE7
`.size()`	`@height @width`	Rychle nastavte výšku a šířku na jednom řádku
`.square()`	`@size`	Staví na `.size()`nastavení šířky a výšky na stejnou hodnotu
`.opacity()`	`@opacity`	Nastavte v celých číslech procento krytí (např. "50" nebo "75")

formuláře

Mixin	Parametry	Používání
`.placeholder()`	`@color: @placeholderText`	Nastavte `placeholder`barvu textu pro vstupy

Typografie

Mixin	Parametry	Používání
`#font > #family > .serif()`	žádný	Přizpůsobte prvku, aby používal zásobník 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ý	Vytvořte vodorovně vycentrovaný kontejner pro uložení obsahu
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Vygenerujte systém mřížky pixelů (kontejner, řádek a sloupce) s n sloupci a x pixelů širokým okapem
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Vytvořte precentní mřížkový systém s n sloupy a x % širokým okapem
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Vytvořte systém mřížky pixelů pro `input`prvky, zohledněte výplň a okraje
`.makeColumn`	`@columns: 1, @offset: 0`	Udělejte z libovolného `div`sloupec mřížky bez `.span*`tříd

vlastnosti CSS3

Mixin	Parametry	Používání
`.border-radius()`	`@radius`	Zaoblení rohů prvku. Může to být jedna hodnota nebo čtyři hodnoty oddělené mezerou
`.box-shadow()`	`@shadow`	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 n - násobek jeho původní velikosti
`.translate()`	`@x, @y`	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-box`pro plnou šířku `input`)
`.user-select()`	`@select`	Ovládejte výběr textu na stránce kurzorem
`.backface-visibility()`	`@visibility: visible`	Zabraňte blikání obsahu při použití 3D transformací CSS
`.resizable()`	`@direction: both`	Upravte velikost libovolného prvku vpravo a dole
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	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

Poznámka: Pokud odesíláte požadavek na stažení na GitHub s upraveným CSS, musíte CSS překompilovat pomocí kterékoli z těchto metod.

Nástroje pro kompilaci

Uzel s makefile

Nainstalujte kompilátor příkazového řádku LESS a uglify-js globálně pomocí npm spuštěním následujícího příkazu:

$ npm install -g less uglify-js

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 ./less/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čí.

Postaveno s MÉNĚ

Proč MÉNĚ?

Co je zahrnuto?

Zjistěte více

Proměnné

Mixins

Operace

Zaváděcí proměnné LESS proměnné, jejich hodnoty a pokyny k použití

Lešení a odkazy

Mřížkový systém

Typografie

Tabulky

Barvy ve stupních šedi

Akcentní barvy

Komponenty

Tlačítka

formuláře

Stavy formulářů a výstrahy

Navbar

Rozbalovací seznamy

Jednotka hrdiny

Bootstrap mixiny

O mixinech

Základní mixy

Parametrické mixiny

Snadno přidejte vlastní

Zahrnuty mixiny

Utility

formuláře

Typografie

Mřížkový systém

vlastnosti CSS3

Pozadí a přechody

Kompilace Bootstrap s LESS

Nástroje pro kompilaci

Uzel s makefile

Příkazový řádek

Javascript

Neoficiální aplikace pro Mac

Další aplikace pro Mac

Crunch

CodeKit

Jednoduché