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 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.

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.

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`	13px
`@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`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

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: 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 `placeholder`barvu 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ý	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

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 n - násobek jeho původní velikosti
`.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-box`pro 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

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

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í

Hypertextové odkazy

Mřížkový systém

Typografie

Barvy ve stupních šedi

Akcentní barvy

Komponenty

Tlačítka

formuláře

Navbar

Stavy formulářů a výstrahy

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é