Выкарыстанне LESS з Bootstrap

Наладзьце і пашырыце Bootstrap з дапамогай LESS , прэпрацэсара CSS, каб скарыстацца перавагамі зменных, міксінаў і іншага, што выкарыстоўваецца для стварэння CSS Bootstrap.

Чаму МЕНШ?

У аснове Bootstrap ляжыць LESS, дынамічная мова табліц стыляў, створаная нашым добрым сябрам Алексісам Селье . Гэта робіць распрацоўку сістэмнага CSS больш хуткай, прасцейшай і весялейшай.

Што ўключана?

У якасці пашырэння CSS LESS уключае зменныя, міксіны для шматразовых фрагментаў кода, аперацыі для простай матэматыкі, укладвання і нават функцыі колеру.

Даведайцеся больш

МЕНШ CSS

Наведайце афіцыйны сайт http://lesscss.org/ , каб даведацца больш.

Пераменныя

Кіраванне колерамі і значэннямі пікселяў у CSS можа быць невялікай праблемай, як правіла, поўным капіявання і ўстаўкі. Аднак не з LESS - прызначце колеры або значэнні пікселяў у якасці зменных і змяніце іх адзін раз.

Міксіны

Гэтыя тры дэкларацыі радыуса мяжы, якія вам трэба зрабіць у звычайным старым CSS? Цяпер яны зведзены да аднаго радка з дапамогай міксінаў, фрагментаў кода, якія можна паўторна выкарыстоўваць дзе заўгодна.

Аперацыі

Зрабіце сваю сетку, ініцыятыву і больш гнуткай, выконваючы матэматыку на хаду з дапамогай аперацый. Памнажайце, дзяліце, складайце і аднімайце на сваім шляху да разумнасці CSS.

Падмосткі і звёны

@bodyBackground @white Колер фону старонкі
@textColor @grayDark Колер тэксту па змаўчанні для ўсяго цела, загалоўкаў і іншага
@linkColor #08c Колер тэксту спасылкі па змаўчанні
@linkColorHover darken(@linkColor, 15%) Стандартны колер тэксту спасылкі пры навядзенні курсора

Сеткавая сістэма

@gridColumns 12
@gridColumnWidth 60 пікселяў
@gridGutterWidth 20 пікселяў
@fluidGridColumnWidth 6,382978723%
@fluidGridGutterWidth 2,127659574%

Тыпаграфіка

@sansFontFamily "Helvetica Neue", Helvetica, Arial, без засечак
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Менло, Манака, "Кур'ер Нью", моношир
@baseFontSize 13 пікселяў Павінны быць пікселі
@baseFontFamily @sansFontFamily
@baseLineHeight 18 пікселяў Павінны быць пікселі
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Табліцы

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

Колеры адценняў шэрага

@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

Кампаненты

Гузікі

@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

Формы

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

Станы формы і абвесткі

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

Навігацыйная панэль

@navbarHeight 40 пікселяў
@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

Выпадальныя спісы

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Адзінка героя

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Пра міксіны

Базавыя міксіны

Базавы міксін - гэта, па сутнасці, уключэнне або частка для фрагмента CSS. Яны напісаны гэтак жа, як клас CSS, і іх можна выклікаць дзе заўгодна.

  1. . элемент {
  2. . Clearfix ();
  3. }

Параметрычныя міксіны

Параметрычны міксін падобны на асноўны міксін, але ён таксама прымае параметры (адсюль і назва) з дадатковымі значэннямі па змаўчанні.

  1. . элемент {
  2. . мяжа - радыус ( 4px );
  3. }

Лёгка дадайце свой уласны

Амаль усе міксіны Bootstrap захоўваюцца ў mixins.less, выдатным службовым файле .less, які дазваляе вам выкарыстоўваць міксіны ў любым з файлаў .less у наборы інструментаў.

Такім чынам, працягвайце і выкарыстоўвайце існуючыя або не саромейцеся дадаваць свае ўласныя па меры неабходнасці.

Уключаны міксіны

Камунальныя паслугі

Міксін Параметры Выкарыстанне
.clearfix() ні адзін Дадайце да любога з бацькоўскіх элементаў, каб ачысціць паплаўкі ўнутры
.tab-focus() ні адзін Прымяніце стыль фокусу Webkit і круглы контур Firefox
.center-block() ні адзін Аўтаматычнае цэнтраванне элемента на ўзроўні блока з дапамогайmargin: auto
.ie7-inline-block() ні адзін Выкарыстоўвайце ў дадатак да звычайнага display: inline-block, каб атрымаць падтрымку IE7
.size() @height @width Хутка задайце вышыню і шырыню на адной лініі
.square() @size Абапіраецца на .size()ўстаноўку аднолькавых значэнняў для шырыні і вышыні
.opacity() @opacity Задайце ў цэлых ліках працэнт непразрыстасці (напрыклад, "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() ні адзін Стварыце гарызантальна па цэнтры кантэйнер для захоўвання вашага кантэнту
#grid > .core() @gridColumnWidth, @gridGutterWidth Стварыце сістэму піксельнай сеткі (кантэйнер, радок і слупкі) з n слупкоў і жолаба шырынёй x пікселяў
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Стварыце сістэму працэнтнай сеткі з n слупкоў і х % шырыні жолаба
#grid > .input() @gridColumnWidth, @gridGutterWidth Стварыце сістэму піксельнай сеткі для inputэлементаў з улікам запаўнення і межаў
.makeColumn @columns: 1, @offset: 0 Ператварыце любы divў слупок сеткі без .span*класаў

Ўласцівасці CSS3

Міксін Параметры Выкарыстанне
.border-radius() @radius Закругліць вуглы элемента. Можа быць адно значэнне або чатыры значэнні, падзеленыя прабеламі
.box-shadow() @shadow Дадайце цень да элемента
.transition() @transition Дадаць эфект пераходу CSS3 (напрыклад, all .2s linear)
.rotate() @degrees Павярнуць элемент на n градусаў
.scale() @ratio Павялічыць элемент у n разоў ад першапачатковага памеру
.translate() @x, @y Перамяшчайце элемент па плоскасцях x і y
.background-clip() @clip Абрэзаць фон элемента (карысна для border-radius)
.background-size() @size Кіруйце памерам фонавых малюнкаў праз CSS3
.box-sizing() @boxmodel Змяніць мадэль скрынкі для элемента (напрыклад, border-boxдля поўнай шырыні input)
.user-select() @select Кіраванне выбарам тэксту курсорам на старонцы
.backface-visibility() @visibility: visible Прадухіленне мігцення кантэнту пры выкарыстанні 3D-пераўтварэнняў CSS
.resizable() @direction: both Зрабіце магчымасць змены памеру любога элемента справа і ўнізе
.content-columns() @columnCount, @columnGap: @gridGutterWidth Зрабіце так, каб змест любога элемента выкарыстоўваў слупкі CSS3
.hyphens() @mode: auto Пераносы CSS3, калі вы гэтага хочаце (уключаючы word-wrap: break-word)

Фоны і градыенты

Міксін Параметры Выкарыстанне
#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 Выкарыстоўваецца для кнопак для прызначэння градыенту і крыху больш цёмнай мяжы
Заўвага: калі вы адпраўляеце запыт на выцягванне ў GitHub са змененым CSS, вы павінны перакампіляваць CSS любым з гэтых метадаў.

Інструменты для кампіляцыі

Вузел з make-файлам

Усталюйце кампілятар каманднага радка LESS, JSHint, Recess і uglify-js глабальна з дапамогай npm, выканаўшы наступную каманду:

$ npm install -g less jshint recess uglify-js

Пасля ўстаноўкі проста запусціце makeз кораня загрузачнага каталога, і ўсё гатова.

Акрамя таго, калі ў вас усталяваны watchr , вы можаце запускаць make watchаўтаматычную перабудову загрузніка кожны раз, калі вы рэдагуеце файл у бібліятэцы загрузкі (гэта неабавязкова, проста для зручнасці).

Камандны радок

Усталюйце інструмент каманднага радка LESS праз Node і выканайце наступную каманду:

$ lessc ./less/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 .