Истифодаи 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 |
#c09853 | |
@warningBackground |
#f3edd2 | |
@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() |
ҳеҷ | Барои нигоҳ доштани мундариҷаи худ як контейнери ба таври уфуқӣ марказонидашуда эҷод кунед |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Эҷоди системаи шабакаи пиксел (контейнер, сатр ва сутунҳо) бо n сутун ва x ҷӯйбори васеъи пиксел |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Системаи шабакаи пешқадамро бо n сутун ва x % ҷӯйборҳои васеъ эҷод кунед |
Хусусиятҳои 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 ва uglify-js-ро дар саросари ҷаҳон бо npm бо иҷро кардани фармони зерин насб кунед:
$ npm насб кунед -g камтар зишт-js
Пас аз насб танҳо 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 аст .