Истифодаи LESS бо Bootstrap
Bootstrap-ро бо LESS , як протсессори CSS фармоиш диҳед ва васеъ кунед, то аз тағирёбандаҳо, миксинҳо ва чизҳои дигар барои сохтани CSS Bootstrap истифода шаванд.
Бо КАМТАР сохта шудааст
Чаро КАМТАР?
Bootstrap бо LESS дар асл сохта шудааст, ки забони динамикии ҷадвали сабкро дӯсти хуби мо Алексис Сельер сохтааст . Он таҳияи CSS-ро дар асоси система тезтар, осонтар ва шавқовартар мекунад.
Чӣ дар бар мегирад?
Ҳамчун тавсеаи CSS, LESS тағирёбандаҳо, миксинҳо барои пораҳои такрории код, амалиётҳо барои математикаи оддӣ, лонасозӣ ва ҳатто функсияҳои рангро дар бар мегирад.
Бисёр омӯхтан
Барои гирифтани маълумоти бештар ба вебсайти расмии http://lesscss.org/ муроҷиат кунед.
Тағйирёбандаҳо
Идоракунии рангҳо ва арзишҳои пиксел дар CSS метавонад каме дардовар бошад, одатан пур аз нусхабардорӣ ва часбонед. На бо LESS - рангҳо ё арзишҳои пикселро ҳамчун тағирёбанда таъин кунед ва онҳоро як маротиба тағир диҳед.
Миксинҳо
Он се эъломияи радиуси сарҳад, ки шумо бояд дар CSS муқаррарӣ кунед? Ҳоло онҳо бо ёрии миксинҳо, порчаҳои код, ки шумо метавонед дар ҳама ҷо дубора истифода кунед, ба як сатр афтодаанд.
Амалиёт
Шабакаи худро пешбарӣ ва фасеҳтар гардонед, ки математикаро дар парвоз бо амалҳо иҷро кунед. Роҳи худро ба CSS-и солим чанд баробар кунед, тақсим кунед, илова кунед ва ихтисор кунед.
Тағирёбандаҳои Bootstrap тағирёбандаҳои LESS, арзишҳои онҳо ва дастурҳои истифода
Гиперпайвандҳо
@linkColor |
# 08c | Ранги матни истинод | |
@linkColorHover |
darken(@linkColor, 15%) |
Ранги пахшкунандаи матни истинод |
Системаи шабакавӣ
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Типография
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
Рангҳои хокистарранг
@black |
#000 | |
@grayDarker |
№ 222 | |
@grayDark |
№ 333 | |
@gray |
№ 555 | |
@grayLight |
#999 | |
@grayLighter |
#ээ | |
@white |
#фф |
Рангҳои аксент
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
# 9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Компонентхо
Тугмаҳо
@primaryButtonBackground |
@linkColor |
Шаклҳо
@placeholderText |
@grayLight |
Навбар
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Ҳолатҳо ва огоҳиҳо ташкил кунед
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Миксҳои пурборкунанда
Дар бораи омехтаҳо
Омехтаҳои асосӣ
Миксинҳои асосӣ аслан дохил ё қисман барои порчаи 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() |
ҳеҷ | Элементро стеки шрифти serif истифода баред |
#font > #family > .sans-serif() |
ҳеҷ | Элементро стеки шрифти sans-serif истифода баред |
#font > #family > .monospace() |
ҳеҷ | Элементро стеки шрифти монофазоӣ истифода баред |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Андозаи шрифт, вазн ва пешбариро ба осонӣ танзим кунед |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Оилаи шрифтро ба serif таъин кунед ва андоза, вазн ва пешро назорат кунед |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Оилаи шрифтро ба sans-serif таъин кунед ва андоза, вазн ва пешбариро назорат кунед |
#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
Воситаҳо барои тартиб додан
Гиреҳ бо makefile
Компилятори сатри фармони LESS -ро бо npm бо иҷро кардани фармони зерин насб кунед:
$ npm камтар насб кунед
Пас аз насб танҳо makeаз решаи директорияи bootstrap худ кор кунед ва шумо ҳама омодаед.
Илова бар ин, агар шумо watchr насб карда бошед, шумо метавонед кор кунед, make watchто ҳар боре, ки шумо файлро дар lib bootstrap таҳрир мекунед, bootstrap ба таври худкор аз нав сохта шавад (ин талаб карда намешавад, танҳо як усули қулай).
Сатри фармон
Асбоби сатри фармони 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.js онҳоро тартиб медиҳад ва дар анбори маҳаллӣ нигоҳ медорад.
Барномаи ғайрирасмии Mac
Барномаи ғайрирасмии Mac феҳристҳои файлҳои .lessро тамошо мекунад ва кодро ба файлҳои маҳаллӣ пас аз ҳар сабти файли .less тамошошуда тартиб медиҳад.
Агар хоҳед, шумо метавонед афзалиятҳоро дар барнома барои минификатсияи худкор ва дар кадом феҳристи файлҳои тартибдодашуда иваз кунед.
Барномаҳои бештари Mac
Кранч
Crunch як муҳаррири LESS ва компилятори олиҷанобест, ки дар Adobe Air сохта шудааст.
CodeKit
CodeKit аз ҷониби ҳамон бача, ки барномаи ғайрирасмии Mac сохта шудааст, як барномаи Mac мебошад, ки LESS, SASS, Stylus ва CoffeeScript-ро тартиб медиҳад.
Содда
Барномаи Mac, Linux ва компютер барои кашолакунӣ ва тарк кардани файлҳои LESS. Илова бар ин, рамзи сарчашма дар GitHub аст .