Коришћење ЛЕСС са Боотстрапом
Прилагодите и проширите Боотстрап помоћу ЛЕСС , ЦСС препроцесора, да бисте искористили предности променљивих, миксина и још много тога што се користи за прављење Боотстрап-овог ЦСС-а.
Изграђен са МАЊЕ
Зашто МАЊЕ?
Боотстрап је направљен са ЛЕСС у својој сржи, динамичким језиком стилова који је креирао наш добар пријатељ, Алекис Селлиер . То чини развој ЦСС заснованог на системима бржим, лакшим и забавнијим.
Шта је укључено?
Као проширење ЦСС-а, ЛЕСС укључује променљиве, миксине за исечке кода за вишекратну употребу, операције за једноставну математику, гнежђење, па чак и функције боја.
Променљиве
Управљање бојама и вредностима пиксела у ЦСС-у може бити мало мука, обично пуно копирања и лепљења. Али не са ЛЕСС – доделите боје или вредности пиксела као променљиве и промените их једном.
Микинс
Те три декларације радијуса границе које треба да направите у обичном старом ЦСС-у? Сада су сведене на један ред уз помоћ миксина, исечака кода које можете поново да користите било где.
Операције
Учините своју мрежу, водећи и супер флексибилнијом тако што ћете радити математику у ходу са операцијама. Умножите, поделите, сабирајте и одузмите свој пут до ЦСС разума.
Боотстрап променљиве МАЊЕ променљиве, њихове вредности и упутства за употребу
Хипервезе
@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 |
#049цдб | |
@green |
#46а546 | |
@red |
#9д261д | |
@yellow |
#ффц40д | |
@orange |
#ф89406 | |
@pink |
#ц3325ф | |
@purple |
#7а43б6 |
Компоненте
Дугмад
@primaryButtonBackground |
@linkColor |
Формс
@placeholderText |
@grayLight |
Навбар
@navbarHeight |
40пк | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Стања образаца и упозорења
@warningText |
#ф3едд2 | |
@warningBackground |
#ц09853 | |
@errorText |
#б94а48 | |
@errorBackground |
#ф2деде | |
@successText |
#468847 | |
@successBackground |
#дфф0д8 | |
@infoText |
#3а87ад | |
@infoBackground |
#д9едф7 |
Боотстрап микинс
О миксинама
Басиц микинс
Основни микс је у суштини укључен или делимичан за исечак ЦСС-а. Написане су баш као ЦСС класа и могу се позвати било где.
- . елемент {
- . цлеарфик ();
- }
Параметриц микинс
Параметарски миксин је као основни миксин, али такође прихвата параметре (отуда и име) са опционим подразумеваним вредностима.
- . елемент {
- . граница - радијус ( 4пк );
- }
Лако додајте своје
Скоро сви Боотстрап-ови миксини су ускладиштени у микинс.лесс, дивној услужној .лесс датотеци која вам омогућава да користите микин у било којој од .лесс датотека у комплету алата.
Дакле, само напред и користите постојеће или слободно додајте своје по потреби.
Инцлудед микинс
Комуналне услуге
| Микин | Параметерс | Употреба |
|---|---|---|
.clearfix() |
ниједан | Додајте било ком родитељу да избришете плутајуће унутар |
.tab-focus() |
ниједан | Примените стил фокуса Вебкит-а и заокружите Фирефок обрис |
.center-block() |
ниједан | Аутоматско центрирање елемента на нивоу блока помоћуmargin: auto |
.ie7-inline-block() |
ниједан | Користите поред редовног display: inline-blockда бисте добили подршку за ИЕ7 |
.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() |
ниједан | Нека елемент лебди као колона мреже |
ЦСС3 својства
| Микин | Параметерс | Употреба |
|---|---|---|
.border-radius() |
@radius: 5px |
Заокружите углове елемента. Може бити једна вредност или четири вредности раздвојене размаком |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Додајте сенку елементу |
.transition() |
@transition |
Додајте ЦСС3 ефекат прелаза (нпр. all .2s linear) |
.rotate() |
@degrees |
Ротирајте елемент за н степени |
.scale() |
@ratio |
Скалирајте елемент на н пута његове оригиналне величине |
.translate() |
@x: 0, @y: 0 |
Померите елемент на равнима к и и |
.background-clip() |
@clip |
Изрежите позадину елемента (корисно за border-radius) |
.background-size() |
@size |
Контролишите величину позадинских слика преко ЦСС3 |
.box-sizing() |
@boxmodel |
Промените модел кутије за елемент (нпр. border-boxза пуну ширину input) |
.user-select() |
@select |
Контролишите одабир текста курсора на страници |
.resizable() |
@direction: both |
Учините промену величине било којег елемента на десној и доњој страни |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Нека садржај било ког елемента користи ЦСС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>.
<линк рел = "стилесхеет/лесс" хреф = "/патх/то/боотстрап.лесс" > <сцрипт срц = "/патх/то/лесс.јс" ></сцрипт>
Да бисте поново компајлирали .лесс датотеке, само их сачувајте и поново учитајте своју страницу. Лесс.јс их компајлира и складишти у локално складиште.
Незванична Мац апликација
Незванична Мац апликација прати директоријуме .лесс датотека и компајлира код у локалне датотеке након сваког чувања гледане датотеке .лесс.
Ако желите, можете да промените подешавања у апликацији за аутоматско умањивање и у ком директоријуму завршавају компајлиране датотеке.
Још Мац апликација
Крцкање
Црунцх је сјајан ЛЕСС едитор и компајлер изграђен на Адобе Аир-у.
ЦодеКит
Направио је исти тип као и незваничну Мац апликацију, ЦодеКит је Мац апликација која компајлира ЛЕСС, САСС, Стилус и ЦоффееСцрипт.
Симплесс
Мац, Линук и ПЦ апликација за превлачење и испуштање компајлирања МАЊЕ датотека. Осим тога, изворни код је на ГитХуб-у .