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.
Zbudowany z MNIEJ
Dlaczego MNIEJ?
Bootstrap jest tworzony 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. Wiele, dziel, dodawaj i odejmuj swoją drogę do zdrowego stylu CSS.
Zmienne bootstrapowe Zmienne LESS, ich wartości i wskazówki dotyczące użycia
Hiperłącza
@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
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Formularze
@placeholderText |
@grayLight |
Pasek nawigacyjny
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Stany formularzy i alerty
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Mieszanki Bootstrap
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 Bootstrapa 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: 5px, @width: 5px |
Szybko ustaw wysokość i szerokość w jednej linii |
.square() |
@size: 5px |
Buduje się .size(), aby ustawić szerokość i wysokość jako tę samą wartość |
.opacity() |
@opacity: 100 |
Ustaw w liczbach całkowitych procent krycia (np. „50” lub „75”) |
Formularze
| Mieszanie | Parametry | Stosowanie |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Ustaw placeholderkolor tekstu dla wejść |
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 | Zapewnij kontener o stałej szerokości (ustawiony za pomocą @siteWidth) do przechowywania treści |
.columns() |
@columns: 1 |
Zbuduj kolumnę siatki, która obejmuje dowolną liczbę kolumn (domyślnie 1 kolumna) |
.offset() |
@columns: 1 |
Przesuń kolumnę siatki z lewym marginesem, który obejmuje dowolną liczbę kolumn |
.gridColumn() |
Żaden | Spraw, aby element unosił się jak kolumna siatki |
Właściwości CSS3
| Mieszanie | Parametry | Stosowanie |
|---|---|---|
.border-radius() |
@radius: 5px |
Zaokrąglij rogi elementu. Może być pojedynczą wartością lub czterema wartościami oddzielonymi spacjami |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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 razy jego oryginalnego rozmiaru |
.translate() |
@x: 0, @y: 0 |
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-boxdla pełnej szerokości input) |
.user-select() |
@select |
Kontroluj zaznaczanie kursorem tekstu na stronie |
.resizable() |
@direction: both |
Zmień rozmiar dowolnego elementu po prawej i na dole |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
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 |
Kompilowanie Bootstrapa z LESS
Narzędzia do kompilacji
Węzeł z makefile
Zainstaluj kompilator wiersza poleceń LESS z npm, uruchamiając następujące polecenie:
$ npm instaluj mniej
Po zainstalowaniu wystarczy uruchomić makez katalogu głównego swojego katalogu startowego i gotowe.
Dodatkowo, jeśli masz zainstalowany watchr , możesz uruchomić make watchautomatyczne przebudowywanie ładowania początkowego za każdym razem, gdy edytujesz plik w bibliotece ładowania początkowego (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 ./lib/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.
Więcej aplikacji na Maca
Schrupać
Crunch to świetnie wyglądający edytor i kompilator LESS zbudowany na Adobe Air.
CodeKit
Stworzony przez tego samego faceta, co nieoficjalna aplikacja na Maca, CodeKit to aplikacja na Maca, która kompiluje LESS, SASS, Stylus i CoffeeScript.
Prostota
Aplikacja na komputery Mac, Linux i PC do kompilowania plików LESS metodą „przeciągnij i upuść”. Dodatkowo kod źródłowy znajduje się na GitHub .