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

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

Зашто МАЊЕ?

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

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

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

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

ЛЕСС ЦСС

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

Променљиве

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

Микинс

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

Операције

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

Скеле и везе

@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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

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

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

О миксинама

Басиц микинс

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

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

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

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

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

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

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

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

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

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

Микин Параметерс Употреба
.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 колоне
.hyphens() @mode: auto ЦСС3 хифенација када то желите (укључује 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 Користи се за дугмад за додељивање градијента и мало тамније границе
Напомена: Ако шаљете захтев за повлачење на ГитХуб са модификованим ЦСС-ом, морате поново да компајлирате ЦСС помоћу било које од ових метода.

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

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

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

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

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

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

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

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

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

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

Јавасцрипт

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

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

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

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

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

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

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

Крцкање

Црунцх је сјајан ЛЕСС едитор и компајлер изграђен на Адобе Аир-у.

ЦодеКит

Направио је исти тип као и незваничну Мац апликацију, ЦодеКит је Мац апликација која компајлира ЛЕСС, САСС, Стилус и ЦоффееСцрипт.

Симплесс

Мац, Линук и ПЦ апликација за превлачење и испуштање компајлирања МАЊЕ датотека. Осим тога, изворни код је на ГитХуб-у .