Używanie LESS z Bootstrapem

Dostosuj i rozszerz Bootstrap za pomocą preprocesora CSS LESS , aby wykorzystać zmienne, domieszki i inne elementy używane do tworzenia CSS Bootstrap.

Dlaczego MNIEJ?

Bootstrap jest zbudowany w oparciu o LESS, dynamiczny język arkuszy stylów stworzony przez naszego dobrego przyjaciela, Alexisa Selliera . Sprawia, że tworzenie CSS opartego na systemach jest szybsze, łatwiejsze i przyjemniejsze.

Co jest zawarte?

Jako rozszerzenie CSS, LESS zawiera zmienne, domieszki dla fragmentów kodu wielokrotnego użytku, operacje dla prostych funkcji matematycznych, zagnieżdżania, a nawet funkcji kolorów.

Ucz się więcej

Odwiedź oficjalną stronę internetową http://lesscss.org/ , aby dowiedzieć się więcej.

Zmienne

Zarządzanie kolorami i wartościami pikseli w CSS może być trochę uciążliwe, zwykle pełne kopiowania i wklejania. Jednak nie z LESS — przypisz kolory lub wartości pikseli jako zmienne i zmień je raz.

Mieszanki

Te trzy deklaracje granicznego promienia, które musisz zrobić w zwykłym CSS? Teraz sprowadzają się do jednej linii za pomocą domieszek, fragmentów kodu, których możesz użyć w dowolnym miejscu.

Operacje

Uczyń swoją siatkę, wiodącą i bardziej elastyczną, wykonując matematykę w locie z operacjami. Pomnóż, dziel, dodawaj i odejmuj swoją drogę do zdrowego stylu CSS.

Rusztowania i linki

`@bodyBackground`	`@white`	Kolor tła strony
`@textColor`	`@grayDark`	Domyślny kolor tekstu dla całej treści, nagłówków i nie tylko
`@linkColor`	`#08c`	Domyślny kolor tekstu linku
`@linkColorHover`	`darken(@linkColor, 15%)`	Domyślny kolor najechania na tekst linku

System siatki

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2,127659574%

Typografia

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, bezszeryfowy
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monako, „Courier New”, monospace
`@baseFontSize`	13px	Musi być pikselami
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Musi być pikselami
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Stoły

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

Kolory w skali szarości

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#ffff

Kolory akcentujące

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

składniki

guziki

`@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`

Formularze

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

Stany formularzy i alerty

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

Pasek nawigacyjny

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

Menu rozwijane

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

Jednostka bohatera

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

O mixinach

Mieszanki podstawowe

Podstawowy mixin to w zasadzie dołączanie lub częściowe fragmenty kodu CSS. Są napisane jak klasa CSS i można je wywołać w dowolnym miejscu.

. element {
  . jasnefix ();
}

Mixiny parametryczne

Mixin parametryczny jest taki sam jak mixin podstawowy, ale akceptuje również parametry (stąd nazwa) z opcjonalnymi wartościami domyślnymi.

. element {
  . obramowanie - promień ( 4px );
}

Łatwo dodawaj własne

Prawie wszystkie domieszki Bootstrap są przechowywane w mixins.less, wspaniałym narzędziowym pliku .less, który umożliwia użycie domieszek w dowolnym pliku .less w zestawie narzędzi.

Więc śmiało korzystaj z istniejących lub dodaj własne, jeśli potrzebujesz.

Dołączone mixiny

Narzędzia

Mieszanie	Parametry	Stosowanie
`.clearfix()`	Żaden	Dodaj do dowolnego rodzica, aby wyczyścić pływaki w obrębie
`.tab-focus()`	Żaden	Zastosuj styl fokusu Webkit i okrągły zarys Firefoksa
`.center-block()`	Żaden	Automatycznie wyśrodkuj element blokowy za pomocą`margin: auto`
`.ie7-inline-block()`	Żaden	Użyj oprócz zwykłego `display: inline-block`, aby uzyskać wsparcie IE7
`.size()`	`@height @width`	Szybko ustaw wysokość i szerokość w jednej linii
`.square()`	`@size`	Buduje, `.size()`aby ustawić szerokość i wysokość jako tę samą wartość
`.opacity()`	`@opacity`	Ustaw w liczbach całkowitych procent krycia (np. „50” lub „75”)

Formularze

Mieszanie	Parametry	Stosowanie
`.placeholder()`	`@color: @placeholderText`	Ustaw `placeholder`kolor tekstu dla danych wejściowych

Typografia

Mieszanie	Parametry	Stosowanie
`#font > #family > .serif()`	Żaden	Spraw, aby element używał stosu czcionek szeryfowych
`#font > #family > .sans-serif()`	Żaden	Spraw, aby element używał stosu czcionek bezszeryfowych
`#font > #family > .monospace()`	Żaden	Spraw, aby element używał stosu czcionek o stałej szerokości
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Łatwo ustaw rozmiar czcionki, wagę i interlinię
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ustaw rodzinę czcionek na szeryfową oraz kontroluj rozmiar, wagę i interlinię
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ustaw rodzinę czcionek na bezszeryfową oraz kontroluj rozmiar, wagę i interlinię
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Ustaw rodzinę czcionek na monospace oraz kontroluj rozmiar, wagę i interlinię

System siatki

Mieszanie	Parametry	Stosowanie
`.container-fixed()`	Żaden	Utwórz wyśrodkowany poziomo pojemnik do przechowywania treści
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Wygeneruj system siatki pikseli (kontener, wiersz i kolumny) z n kolumnami i rynną o szerokości x pikseli
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Wygeneruj precentowy system siatki z n kolumnami i x % szerokości rynny
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Wygeneruj system siatki pikseli dla `input`elementów, uwzględniając dopełnienie i obramowania
`.makeColumn`	`@columns: 1, @offset: 0`	Zamień dowolne `div`w kolumnę z siatką bez `.span*`klas

Właściwości CSS3

Mieszanie	Parametry	Stosowanie
`.border-radius()`	`@radius`	Zaokrąglij rogi elementu. Może być pojedynczą wartością lub czterema wartościami oddzielonymi spacjami
`.box-shadow()`	`@shadow`	Dodaj cień do elementu
`.transition()`	`@transition`	Dodaj efekt przejścia CSS3 (np. `all .2s linear`)
`.rotate()`	`@degrees`	Obróć element o n stopni
`.scale()`	`@ratio`	Przeskaluj element do n -krotności jego oryginalnego rozmiaru
`.translate()`	`@x, @y`	Przenieś element na płaszczyzny x i y
`.background-clip()`	`@clip`	Przytnij tło elementu (przydatne dla `border-radius`)
`.background-size()`	`@size`	Kontroluj rozmiar obrazów tła za pomocą CSS3
`.box-sizing()`	`@boxmodel`	Zmień model pudełka dla elementu (np. `border-box`dla pełnej szerokości `input`)
`.user-select()`	`@select`	Kontroluj zaznaczanie kursorem tekstu na stronie
`.backface-visibility()`	`@visibility: visible`	Zapobiegaj migotaniu treści podczas korzystania z przekształceń CSS 3D
`.resizable()`	`@direction: both`	Zmień rozmiar dowolnego elementu po prawej i na dole
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Spraw, aby zawartość dowolnego elementu używała kolumn CSS3

Tła i gradienty

Mieszanie	Parametry	Stosowanie
`#translucent > .background()`	`@color: @white, @alpha: 1`	Nadaj elementowi półprzezroczysty kolor tła
`#translucent > .border()`	`@color: @white, @alpha: 1`	Nadaj elementowi półprzezroczysty kolor obramowania
`#gradient > .vertical()`	`@startColor, @endColor`	Utwórz pionowy gradient tła w różnych przeglądarkach
`#gradient > .horizontal()`	`@startColor, @endColor`	Utwórz poziomy gradient tła w różnych przeglądarkach
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Utwórz kierunkowy gradient tła w różnych przeglądarkach
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Utwórz trójkolorowy gradient tła dla różnych przeglądarek
`#gradient > .radial()`	`@innerColor, @outerColor`	Utwórz radialny gradient tła w różnych przeglądarkach
`#gradient > .striped()`	`@color, @angle`	Utwórz gradient w paski w różnych przeglądarkach
`#gradientBar()`	`@primaryColor, @secondaryColor`	Używany do przycisków do przypisywania gradientu i nieco ciemniejszego obramowania

Uwaga: jeśli przesyłasz żądanie ściągnięcia do GitHub ze zmodyfikowanym CSS, musisz ponownie skompilować CSS za pomocą dowolnej z tych metod.

Narzędzia do kompilacji

Węzeł z makefile

Zainstaluj kompilator wiersza poleceń LESS i uglify-js globalnie za pomocą npm, uruchamiając następujące polecenie:

$ npm install -g mniej uglify-js

Po zainstalowaniu wystarczy uruchomić makez katalogu głównego swojego katalogu startowego i gotowe.

Dodatkowo, jeśli masz zainstalowany watchr , możesz uruchomić, make watchaby bootstrap był automatycznie przebudowywany za każdym razem, gdy edytujesz plik w bibliotece bootstrap (nie jest to wymagane, tylko wygodna metoda).

Wiersz poleceń

Zainstaluj narzędzie wiersza poleceń LESS za pośrednictwem Node i uruchom następujące polecenie:

$ lessc ./less/bootstrap.less > bootstrap.css

Pamiętaj, aby uwzględnić --compressw tym poleceniu, jeśli próbujesz zaoszczędzić trochę bajtów!

JavaScript

Pobierz najnowszy plik Less.js i dołącz ścieżkę do niego (i Bootstrap) w pliku <head>.

<link rel = "stylesheet/less" href = "/ścieżka/do/bootstrap.less" > <script src = "/ścieżka/do/less.js" ></script>

Aby ponownie skompilować pliki .less, po prostu je zapisz i ponownie załaduj swoją stronę. Less.js kompiluje je i przechowuje w pamięci lokalnej.

Nieoficjalna aplikacja na Maca

Nieoficjalna aplikacja na Maca obserwuje katalogi plików .less i kompiluje kod do plików lokalnych po każdym zapisaniu obserwowanego pliku .less.

Jeśli chcesz, możesz zmienić preferencje w aplikacji, aby automatycznie minifikować i do którego katalogu trafiają skompilowane pliki.

Zbudowany z MNIEJ

Dlaczego MNIEJ?

Co jest zawarte?

Ucz się więcej

Zmienne

Mieszanki

Operacje

Zmienne bootstrapowe Zmienne LESS, ich wartości i wskazówki dotyczące użycia

Rusztowania i linki

System siatki

Typografia

Stoły

Kolory w skali szarości

Kolory akcentujące

składniki

guziki

Formularze

Stany formularzy i alerty

Pasek nawigacyjny

Menu rozwijane

Jednostka bohatera

Mieszanki Bootstrap

O mixinach

Mieszanki podstawowe

Mixiny parametryczne

Łatwo dodawaj własne

Dołączone mixiny

Narzędzia

Formularze

Typografia

System siatki

Właściwości CSS3

Tła i gradienty

Kompilowanie Bootstrapa z LESS

Narzędzia do kompilacji

Węzeł z makefile

Wiersz poleceń

JavaScript

Nieoficjalna aplikacja na Maca

Więcej aplikacji na Maca

Schrupać

CodeKit

Prostota