Выкарыстанне LESS з Bootstrap
Наладзьце і пашырыце Bootstrap з дапамогай LESS , прэпрацэсара CSS, каб скарыстацца перавагамі зменных, міксінаў і іншага, што выкарыстоўваецца для стварэння CSS Bootstrap.
Пабудаваны з МЕНШЫМ
Чаму МЕНШ?
У аснове Bootstrap ляжыць LESS, дынамічная мова табліц стыляў, створаная нашым добрым сябрам Алексісам Селье . Гэта робіць распрацоўку сістэмнага CSS больш хуткай, прасцейшай і весялейшай.
Што ўключана?
У якасці пашырэння CSS LESS уключае зменныя, міксіны для шматразовых фрагментаў кода, аперацыі для простай матэматыкі, укладвання і нават функцыі колеру.
Пераменныя
Кіраванне колерамі і значэннямі пікселяў у CSS можа быць невялікай праблемай, як правіла, поўным капіявання і ўстаўкі. Аднак не з LESS - прызначце колеры або значэнні пікселяў у якасці зменных і змяніце іх адзін раз.
Міксіны
Гэтыя тры дэкларацыі радыуса мяжы, якія вам трэба зрабіць у звычайным старым CSS? Цяпер яны зведзены да аднаго радка з дапамогай міксінаў, фрагментаў кода, якія можна паўторна выкарыстоўваць дзе заўгодна.
Аперацыі
Зрабіце сваю сетку, ініцыятыву і больш гнуткай, выконваючы матэматыку на хаду з дапамогай аперацый. Памнажайце, дзяліце, складайце і аднімайце на сваім шляху да разумнасці CSS.
Пераменныя Bootstrap. Пераменныя LESS, іх значэнні і рэкамендацыі па выкарыстанні
Гіперспасылкі
@linkColor |
#08c | Колер тэксту спасылкі па змаўчанні | |
@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 |
#fff |
Акцэнтныя колеры
@blue |
#049cdb | |
@green |
#46а546 | |
@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 |
Міксіны Bootstrap
Пра міксіны
Базавыя міксіны
Базавы міксін - гэта, па сутнасці, уключэнне або частка для фрагмента CSS. Яны напісаны гэтак жа, як клас CSS, і іх можна выклікаць дзе заўгодна.
- . элемент {
- . Clearfix ();
- }
Параметрычныя міксіны
Параметрычны міксін падобны на асноўны міксін, але ён таксама прымае параметры (адсюль і назва) з дадатковымі значэннямі па змаўчанні.
- . элемент {
- . мяжа - радыус ( 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() |
ні адзін | Зрабіце так, каб элемент выкарыстоўваў стос шрыфтоў без засечак |
#font > #family > .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 |
Усталюйце сямейства шрыфтоў без засечак і кантралюйце памер, вагу і лінейку |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Усталюйце сямейства шрыфтоў у монашырынны, а таксама кантралюйце памер, вагу і лінейку |
Сеткавая сістэма
| Міксін | Параметры | Выкарыстанне |
|---|---|---|
.container-fixed() |
ні адзін | Забяспечце кантэйнер фіксаванай шырыні (усталяваны з @siteWidth) для захоўвання вашага змесціва |
.columns() |
@columns: 1 |
Стварыце слупок сеткі, які ахоплівае любую колькасць слупкоў (па змаўчанні 1 слупок) |
.offset() |
@columns: 1 |
Зрушэнне слупка сеткі з левым полем, якое ахоплівае любую колькасць слупкоў |
.gridColumn() |
ні адзін | Зрабіце элемент плаваючым, як слупок сеткі |
Ўласцівасці CSS3
| Міксін | Параметры | Выкарыстанне |
|---|---|---|
.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 |
Выкарыстоўваецца для кнопак для прызначэння градыенту і крыху больш цёмнай мяжы |
Кампіляцыя Bootstrap з LESS
Інструменты для кампіляцыі
Вузел з make-файлам
Усталюйце кампілятар каманднага радка LESS глабальна з дапамогай npm, выканаўшы наступную каманду:
$ npm install -g less
Пасля ўстаноўкі проста запусціце makeз кораня загрузачнага каталога, і ўсё гатова.
Акрамя таго, калі ў вас усталяваны watchr , вы можаце запускаць make watchаўтаматычную перабудову загрузніка кожны раз, калі вы рэдагуеце файл у бібліятэцы загрузкі (гэта неабавязкова, проста для зручнасці).
Камандны радок
Усталюйце інструмент каманднага радка LESS праз Node і выканайце наступную каманду:
$lessc ./lib/bootstrap.less > bootstrap.css
Абавязкова ўключыце --compressў гэтую каманду, калі вы спрабуеце зэканоміць некаторыя байты!
Javascript
Спампуйце апошнюю версію Less.js і ўключыце шлях да яе (і Bootstrap) у <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Каб перакампіляваць файлы .less, проста захавайце іх і перазагрузіце старонку. Less.js кампілюе іх і захоўвае ў лакальным сховішчы.
Неафіцыйнае прыкладанне для Mac
Неафіцыйнае прыкладанне для Mac назірае за каталогамі файлаў .less і кампілюе код у лакальныя файлы пасля кожнага захавання прагледжанага файла .less.
Пры жаданні вы можаце пераключаць налады ў дадатку для аўтаматычнай мінімізацыі і каталога, у які ў канчатковым выніку трапляюць скампіляваныя файлы.
Больш праграм для Mac
Храбуст
Crunch - выдатны рэдактар і кампілятар LESS, створаны на аснове Adobe Air.
CodeKit
Створаны тым жа чалавекам, што і неафіцыйнае прыкладанне для Mac, CodeKit - гэта дадатак для Mac, якое кампілюе LESS, SASS, Stylus і CoffeeScript.
Бяспроста
Прыкладанне для Mac, Linux і ПК для кампіляцыі LESS файлаў перацягваннем. Акрамя таго, зыходны код знаходзіцца на GitHub .