Коришћење ЛЕСС са Боотстрапом

Прилагодите и проширите Боотстрап помоћу ЛЕСС , ЦСС препроцесора, да бисте искористили предности променљивих, миксина и још много тога што се користи за прављење Боотстрап-овог ЦСС-а.

Зашто МАЊЕ?

Боотстрап је направљен са ЛЕСС-ом у својој сржи, динамичким језиком стилова који је креирао наш добар пријатељ, Алекис Селлиер . То чини развој ЦСС заснованог на системима бржим, лакшим и забавнијим.

Шта је укључено?

Као проширење ЦСС-а, ЛЕСС укључује променљиве, миксине за исечке кода за вишекратну употребу, операције за једноставну математику, гнежђење, па чак и функције боја.

Сазнајте више

Посетите званичну веб локацију на хттп ://лессцсс.орг/ да бисте сазнали више.

Променљиве

Управљање бојама и вредностима пиксела у ЦСС-у може бити мало мука, обично пуно копирања и лепљења. Али не са ЛЕСС – доделите боје или вредности пиксела као променљиве и промените их једном.

Микинс

Те три декларације радијуса границе које треба да направите у обичном старом ЦСС-у? Сада су сведене на један ред уз помоћ миксина, исечака кода које можете поново да користите било где.

Операције

Учините своју мрежу, водећи и супер флексибилнијом тако што ћете радити математику у ходу са операцијама. Множите, делите, сабирајте и одузимајте свој пут до ЦСС разума.

Скеле и везе

`@bodyBackground`	`@white`	Боја позадине странице
`@textColor`	`@grayDark`	Подразумевана боја текста за цело тело, наслове и још много тога
`@linkColor`	`#08c`	Подразумевана боја текста везе
`@linkColorHover`	`darken(@linkColor, 15%)`	Подразумевана боја текста везе

Систем мреже

`@gridColumns`	12
`@gridColumnWidth`	60пк
`@gridGutterWidth`	20пк
`@fluidGridColumnWidth`	6,382978723%
`@fluidGridGutterWidth`	2,127659574%

Типографија

`@sansFontFamily`	„Хелветица Неуе“, Хелветица, Ариал, санс-сериф
`@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`	#ффф

Акцентне боје

`@blue`	#049цдб
`@green`	#46а546
`@red`	#9д261д
`@yellow`	#ффц40д
`@orange`	#ф89406
`@pink`	#ц3325ф
`@purple`	#7а43б6

Компоненте

Дугмад

`@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`	#ц09853
`@warningBackground`	#ф3едд2
`@errorText`	#б94а48
`@errorBackground`	#ф2деде
`@successText`	#468847
`@successBackground`	#дфф0д8
`@infoText`	#3а87ад
`@infoBackground`	#д9едф7

Навбар

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

Јединица хероја

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

О миксинама

Басиц микинс

Основни микс је у суштини укључен или делимичан за исечак ЦСС-а. Написане су баш као ЦСС класа и могу се позвати било где.

. елемент {
  . цлеарфик ();
}

Параметриц микинс

Параметарски миксин је као основни миксин, али такође прихвата параметре (отуда и име) са опционим подразумеваним вредностима.

. елемент {
  . граница - радијус ( 4пк );
}

Лако додајте своје

Скоро сви Боотстрап-ови миксини су ускладиштени у микинс.лесс, дивној услужној .лесс датотеци која вам омогућава да користите микин у било којој од .лесс датотека у комплету алата.

Дакле, само напред и користите постојеће или слободно додајте своје по потреби.

Инцлудед микинс

Комуналне услуге

Микин	Параметерс	Употреба
`.clearfix()`	ниједан	Додајте било ком родитељу да избришете плутајуће унутар
`.tab-focus()`	ниједан	Примените стил фокуса Вебкит-а и заокружите Фирефок обрис
`.center-block()`	ниједан	Аутоматско центрирање елемента на нивоу блока помоћу`margin: auto`
`.ie7-inline-block()`	ниједан	Користите поред редовног `display: inline-block`да бисте добили подршку за ИЕ7
`.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`	Генеришите систем пиксела мреже (контејнер, ред и колоне) са н колона и олуком ширине к пиксела
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Генеришите прецентни систем мреже са н колона и к % широким олуком
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Генеришите систем пиксела мреже за `input`елементе, узимајући у обзир паддинг и границе
`.makeColumn`	`@columns: 1, @offset: 0`	Претворите било коју `div`у колону мреже без `.span*`класа

ЦСС3 својства

Микин	Параметерс	Употреба
`.border-radius()`	`@radius`	Заокружите углове елемента. Може бити једна вредност или четири вредности раздвојене размаком
`.box-shadow()`	`@shadow`	Додајте сенку елементу
`.transition()`	`@transition`	Додајте ЦСС3 ефекат прелаза (нпр. `all .2s linear`)
`.rotate()`	`@degrees`	Ротирајте елемент за н степени
`.scale()`	`@ratio`	Скалирајте елемент на н пута његову првобитну величину
`.translate()`	`@x, @y`	Померите елемент на равнима к и и
`.background-clip()`	`@clip`	Изрежите позадину елемента (корисно за `border-radius`)
`.background-size()`	`@size`	Контролишите величину позадинских слика преко ЦСС3
`.box-sizing()`	`@boxmodel`	Промените модел кутије за елемент (нпр. `border-box`за пуну ширину `input`)
`.user-select()`	`@select`	Контролишите одабир текста курсора на страници
`.backface-visibility()`	`@visibility: visible`	Спречите треперење садржаја када користите ЦСС 3Д трансформације
`.resizable()`	`@direction: both`	Учините промену величине било којег елемента на десној и доњој страни
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Нека садржај било ког елемента користи ЦСС3 колоне

Позадине и градијенти

Микин	Параметерс	Употреба
`#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`	Користи се за дугмад за додељивање градијента и мало тамније границе

Напомена: Ако шаљете захтев за повлачење на ГитХуб са модификованим ЦСС-ом, морате поново да компајлирате ЦСС помоћу било које од ових метода.

Алати за састављање

Чвор са макефилеом

Инсталирајте ЛЕСС компајлер командне линије и углифи-јс глобално помоћу нпм-а тако што ћете покренути следећу команду:

$ нпм инсталл -г мање углифи-јс

Једном инсталирано само покрените makeиз корена вашег директоријума за покретање и све је спремно.

Поред тога, ако имате инсталиран ватцхр , можете покренути make watchда се боотстрап аутоматски реконструише сваки пут када уређујете датотеку у библиотеци за покретање (ово није потребно, само је погодан метод).

Командна линија

Инсталирајте ЛЕСС алатку командне линије преко Ноде-а и покрените следећу команду:

$ лессц ./лесс/боотстрап.лесс > боотстрап.цсс

Обавезно укључите --compressту команду ако покушавате да сачувате неке бајтове!

Јавасцрипт

Преузмите најновији Лесс.јс и укључите путању до њега (и Боотстрап) у <head>.

<линк рел = "стилесхеет/лесс" хреф = "/патх/то/боотстрап.лесс" > <сцрипт срц = "/патх/то/лесс.јс" ></сцрипт>

Да бисте поново компајлирали .лесс датотеке, само их сачувајте и поново учитајте своју страницу. Лесс.јс их компајлира и складишти у локално складиште.

Незванична Мац апликација

Незванична Мац апликација прати директоријуме .лесс датотека и компајлира код у локалне датотеке након сваког чувања гледане датотеке .лесс.

Ако желите, можете да промените подешавања у апликацији за аутоматско умањивање и у ком директоријуму завршавају компајлиране датотеке.

Изграђен са МАЊЕ

Зашто МАЊЕ?

Шта је укључено?

Сазнајте више

Променљиве

Микинс

Операције

Боотстрап променљиве МАЊЕ променљиве, њихове вредности и упутства за употребу

Скеле и везе

Систем мреже

Типографија

Табле

Боје у нијансама сиве

Акцентне боје

Компоненте

Дугмад

Формс

Стања образаца и упозорења

Навбар

Падајући мени

Јединица хероја

Боотстрап микинс

О миксинама

Басиц микинс

Параметриц микинс

Лако додајте своје

Инцлудед микинс

Комуналне услуге

Формс

Типографија

Систем мреже

ЦСС3 својства

Позадине и градијенти

Превођење Боотстрапа са ЛЕСС

Алати за састављање

Чвор са макефилеом

Командна линија

Јавасцрипт

Незванична Мац апликација

Још Мац апликација

Крцкање

ЦодеКит

Симплесс