Приспособете го и проширете го Bootstrap со LESS , CSS препроцесор, за да ги искористите предностите на променливите, миксините и повеќе што се користат за изградба на CSS на Bootstrap.
Bootstrap е направен со LESS во неговото јадро, динамичен јазик за стилски лист создаден од нашиот добар пријател, Алексис Селиер . Го прави развојот на CSS базиран на системи побрзо, полесно и позабавно.
Како продолжување на CSS, LESS вклучува променливи, миксини за фрагменти од код што може да се користат повеќекратно, операции за едноставна математика, вгнездување, па дури и функции за боја.
Управувањето со боите и вредностите на пиксели во CSS може да биде малку мачно, обично полно со копирање и залепување. Сепак, не со ПОМАЛКУ - доделете бои или вредности на пиксели како променливи и променете ги еднаш.
Оние три декларации за граничен радиус што треба да ги направите во редовниот CSS? Сега тие се сведуваат на една линија со помош на миксини, фрагменти од код што можете повторно да ги користите насекаде.
Направете ја вашата мрежа, водечка и посуперфлексибилна со тоа што ќе ја направите математиката во лет со операциите. Умножете, делете, додавајте и одземете го вашиот пат до разумноста на CSS.
@linkColor |
#08в | Стандардна боја на текстот на врската | |
@linkColorHover |
darken(@linkColor, 15%) |
Стандардна боја на лебдењето на текстот на врската |
@gridColumns |
12 |
@gridColumnWidth |
60 пиксели |
@gridGutterWidth |
20 пиксели |
@fluidGridColumnWidth |
6,382978723% |
@fluidGridGutterWidth |
2,127659574% |
@baseFontSize |
13 пиксели |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18 пиксели |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#еее | |
@white |
#ффф |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40 пиксели | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
# 3a87ad | |
@infoBackground |
#d9edf7 |
Основниот миксин во суштина е вклучување или делумен дел за фрагмент од CSS. Тие се напишани исто како класа CSS и може да се повикаат насекаде.
- . елемент {
- . појасни ();
- }
Параметарски миксин е исто како основен микс, но исто така прифаќа параметри (оттука и името) со опционални стандардни вредности.
- . елемент {
- . граница - радиус ( 4px );
- }
Речиси сите миксини на Bootstrap се зачувани во mixins.less, прекрасна услужна датотека .less која ви овозможува да користите миксин во која било од датотеките .less во комплетот со алатки.
Затоа, продолжете и искористете ги постојните или слободно додајте си по што ви треба.
Измешајте | Параметри | Употреба |
---|---|---|
.clearfix() |
ниеден | Додајте на кој било родител за да ги исчистите плови внатре |
.tab-focus() |
ниеден | Применете го стилот на фокусирање на Webkit и заокружете го прегледот на Firefox |
.center-block() |
ниеден | Автоматско центрирање на елемент на ниво на блок користејќиmargin: auto |
.ie7-inline-block() |
ниеден | Користете како додаток на редовните display: inline-block за да добиете поддршка за IE7 |
.size() |
@height: 5px, @width: 5px |
Брзо поставете ја висината и ширината на една линија |
.square() |
@size: 5px |
Се надоврзува за .size() поставување на ширината и висината како иста вредност |
.opacity() |
@opacity: 100 |
Поставете го, во цели броеви, процентот на непроѕирност (на пр., „50“ или „75“) |
Измешајте | Параметри | Употреба |
---|---|---|
.placeholder() |
@color: @placeholderText |
Поставете ја placeholder бојата на текстот за влезови |
Измешајте | Параметри | Употреба |
---|---|---|
#font > #family > .serif() |
ниеден | Направете елемент да користи стек на фонтови за сериф |
#font > #family > .sans-serif() |
ниеден | Направете елемент да користи стек на фонтови sans-serif |
#font > #family > .monospace() |
ниеден | Направете елемент да користи стек на фонтови monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Лесно поставете ја големината на фонтот, тежината и водечките |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Поставете го семејството на фонтови на сериф и контролирајте ја големината, тежината и водечките |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Поставете го семејството на фонтови на sans-serif и контролирајте ја големината, тежината и водечките |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Поставете го семејството на фонтови на monospace и контролирајте ја големината, тежината и водечките |
Измешајте | Параметри | Употреба |
---|---|---|
.container-fixed() |
ниеден | Обезбедете контејнер со фиксна ширина (поставен со @siteWidth ) за чување на вашата содржина |
.columns() |
@columns: 1 |
Создадете мрежна колона што опфаќа кој било број на колони (стандардно до 1 колона) |
.offset() |
@columns: 1 |
Поместување на мрежната колона со лева маргина што опфаќа кој било број на колони |
.gridColumn() |
ниеден | Направете елемент да лебди како колона на мрежа |
Измешајте | Параметри | Употреба |
---|---|---|
.border-radius() |
@radius: 5px |
Заокружете ги аглите на елементот. Може да биде една вредност или четири вредности одвоени со простор |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Додадете паѓачка сенка на елемент |
.transition() |
@transition |
Додајте ефект на транзиција CSS3 (на пр., all .2s linear ) |
.rotate() |
@degrees |
Завртете елемент n степени |
.scale() |
@ratio |
Скалирај го елементот до n пати поголема од неговата оригинална големина |
.translate() |
@x: 0, @y: 0 |
Поместете елемент на x и y рамнините |
.background-clip() |
@clip |
Исечете ја позадината на елементот (корисно за border-radius ) |
.background-size() |
@size |
Контролирајте ја големината на сликите во заднина преку CSS3 |
.box-sizing() |
@boxmodel |
Променете го моделот на кутијата за елемент (на пример, border-box за целосна ширина input ) |
.user-select() |
@select |
Контролирајте го изборот на текст на курсорот на страницата |
.resizable() |
@direction: both |
Направете кој било елемент да може да се промени големината на десната и долу |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Направете содржината на кој било елемент да користи CSS3 колони |
Измешајте | Параметри | Употреба |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Дајте му на елементот проѕирна боја на позадината |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Дајте му на елементот проѕирна боја на границата |
.#gradient > .vertical() |
@startColor, @endColor |
Создадете вертикален градиент на позадина со вкрстен прелистувач |
.#gradient > .horizontal() |
@startColor, @endColor |
Создадете хоризонтален градиент на позадината меѓу прелистувачот |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Создадете градиент на заднина со насочен насочувачки прелистувач |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Направете градиент на заднина со три бои со вкрстен прелистувач |
.#gradient > .radial() |
@innerColor, @outerColor |
Создадете радијален градиент на позадината меѓу прелистувачот |
.#gradient > .striped() |
@color, @angle |
Направете градиент на заднина со шарени прелистувачи |
.#gradientBar() |
@primaryColor, @secondaryColor |
Се користи за копчиња за доделување градиент и малку потемна граница |
Инсталирајте го компајлерот на командната линија LESS глобално со npm со извршување на следнава команда:
$ npm инсталирај -g помалку
Откако ќе се инсталира, само стартувајте make
од коренот на директориумот за подигање и сè сте подготвени.
Дополнително, ако имате инсталирано Watchr , може да се кандидира make watch
за автоматско обновување на bootstrap секој пат кога уредувате датотека во подигнувачката lib (ова не е потребно, само практичен метод).
Инсталирајте ја алатката за командната линија LESS преку Node и извршете ја следнава команда:
$ lessc ./lib/bootstrap.less > bootstrap.css
Бидете сигурни да вклучите --compress
во таа команда ако се обидувате да зачувате некои бајти!
Преземете го најновиот Less.js и вклучете ја патеката до неа (и Bootstrap) во <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
За да ги прекомпајлирате датотеките .less, само зачувајте ги и повторно вчитајте ја вашата страница. Less.js ги компајлира и ги складира во локално складирање.
Неофицијалната апликација за Mac гледа директориуми со датотеки .less и го компајлира кодот во локални датотеки по секое зачувување на гледана датотека .less.
Ако сакате, можете да ги префрлите параметрите во апликацијата за автоматско минимизирање и во кој директориум завршуваат компајлираните датотеки.
Crunch е извонреден уредник и компајлер за ПОМАЛКУ, изграден на Adobe Air.
Создадена од истиот човек како и неофицијалната апликација за Mac, CodeKit е апликација за Mac која компајлира LESS, SASS, Stylus и CoffeeScript.
Апликација за Mac, Linux и PC за влечење и пушти компајлирање на ПОМАЛКУ датотеки. Плус, изворниот код е на GitHub .