Истифодаи LESS бо Bootstrap

Bootstrap-ро бо LESS , як протсессори CSS фармоиш диҳед ва васеъ кунед, то аз тағирёбандаҳо, миксинҳо ва чизҳои дигар барои сохтани CSS Bootstrap истифода шаванд.

Чаро КАМТАР?

Bootstrap бо LESS дар асл сохта шудааст, забони ҷадвали динамикӣ, ки аз ҷониби дӯсти хуби мо Алексис Сельер сохта шудааст. Он таҳияи CSS-ро дар асоси система тезтар, осонтар ва шавқовартар мекунад.

Чӣ дар бар мегирад?

Ҳамчун тавсеаи CSS, LESS тағирёбандаҳо, миксинҳо барои пораҳои такрории код, амалиётҳо барои математикаи оддӣ, лонасозӣ ва ҳатто функсияҳои рангро дар бар мегирад.

Бисёр омӯхтан

Барои гирифтани маълумоти бештар ба вебсайти расмии http://lesscss.org/ муроҷиат кунед.

Тағйирёбандаҳо

Идоракунии рангҳо ва арзишҳои пиксел дар CSS метавонад каме дардовар бошад, одатан пур аз нусхабардорӣ ва часбонед. На бо LESS - рангҳо ё арзишҳои пикселро ҳамчун тағирёбанда таъин кунед ва онҳоро як маротиба тағир диҳед.

Миксинҳо

Он се эъломияи радиуси сарҳад, ки шумо бояд дар CSS муқаррарӣ кунед? Ҳоло онҳо бо ёрии миксинҳо, порчаҳои код, ки шумо метавонед дар ҳама ҷо дубора истифода баред, ба як сатр афтодаанд.

Амалиёт

Шабакаи худро пешбар ва хеле фасеҳтар тавассути иҷрои риёзиёт дар парвоз бо амалиётҳо созед. Роҳи худро ба солимии CSS зарб кунед, тақсим кунед, илова кунед ва ихтисор кунед.

Пайвастшавӣ ва пайвандҳо

`@bodyBackground`	`@white`	Ранги заминаи саҳифа
`@textColor`	`@grayDark`	Ранги матни пешфарз барои тамоми бадан, сарлавҳаҳо ва ғайра
`@linkColor`	`#08c`	Ранги матни истинод
`@linkColorHover`	`darken(@linkColor, 15%)`	Ранги пахшкунандаи матни истинод

Системаи шабакавӣ

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Типография

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Менло, Монако, "Courier New", monospace
`@baseFontSize`	13px	Бояд пиксел бошад
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Бояд пиксел бошад
`@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`	#049cdb
`@green`	#46a546
`@red`	# 9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Компонентхо

Тугмаҳо

`@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`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Навбар

`@navbarHeight`	40px
`@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`

Дар бораи омехтаҳо

Омехтаҳои асосӣ

Миксинҳои асосӣ аслан дохил ё қисман барои порчаи 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 @width`	Баландӣ ва паҳниро зуд дар як сатр муқаррар кунед
`.square()`	`@size`	Барои муқаррар кардани паҳно `.size()`ва баландии ҳамон арзиш сохта мешавад
`.opacity()`	`@opacity`	Фоизи шаффофиятро бо рақамҳои пурра муқаррар кунед (масалан, "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 % ҷӯйборҳои васеъ эҷод кунед
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Системаи шабакаи пикселро барои `input`унсурҳо, баҳисобгирии пуркунӣ ва сарҳадҳо эҷод кунед
`.makeColumn`	`@columns: 1, @offset: 0`	Ҳар якро `div`ба сутуни шабака бидуни `.span*`синфҳо табдил диҳед

Хусусиятҳои CSS3

Миксин	Параметрҳо	Истифода
`.border-radius()`	`@radius`	Гӯшаҳои элементро мудаввар кунед. Метавонад як арзиши ягона ё чаҳор арзиши аз фосила ҷудошуда бошад
`.box-shadow()`	`@shadow`	Ба элемент сояи афтанда илова кунед
`.transition()`	`@transition`	Илова кардани эффекти гузариш CSS3 (масалан, `all .2s linear`)
`.rotate()`	`@degrees`	Элементро n дараҷа гардиш кунед
`.scale()`	`@ratio`	Элементро ба андозаи n маротиба андозаи аслии он андоза кунед
`.translate()`	`@x, @y`	Элементро дар ҳавопаймоҳои x ва y ҳаракат кунед
`.background-clip()`	`@clip`	Заминаи элементро буред (барои муфид `border-radius`)
`.background-size()`	`@size`	Андозаи тасвирҳои пасзаминаро тавассути CSS3 назорат кунед
`.box-sizing()`	`@boxmodel`	Модели қуттии элементро тағир диҳед (масалан, `border-box`барои паҳнои пурра `input`)
`.user-select()`	`@select`	Интихоби курсори матн дар саҳифаро идора кунед
`.backface-visibility()`	`@visibility: visible`	Ҳангоми истифодаи тағиротҳои CSS 3D милтиқии мундариҷаро пешгирӣ кунед
`.resizable()`	`@direction: both`	Ҳар як унсурро дар тарафи рост ва поён тағирёбанда созед
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Мундариҷаи ягон унсурро сутунҳои CSS3 истифода баред
`.hyphens()`	`@mode: auto`	Дефис CSS3 вақте ки шумо мехоҳед (дар бар мегирад `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`	Барои тугмаҳо барои таъин кардани градиент ва каме ториктар истифода мешавад

Эзоҳ: Агар шумо дархости кашиданро ба GitHub бо CSS тағирёфта ирсол кунед, шумо бояд CSS-ро тавассути яке аз ин усулҳо дубора тартиб диҳед.

Воситаҳо барои тартиб додан

Гиреҳ бо makefile

Компилятори сатри фармони LESS, JSHint, Recess ва uglify-js-ро дар саросари ҷаҳон бо npm бо иҷро кардани фармони зерин насб кунед:

$ npm насб -g камтар jshint танаффуси uglify-js

Пас аз насб танҳо makeаз решаи директорияи bootstrap худ кор кунед ва шумо ҳама омодаед.

Илова бар ин, агар шумо watchr насб карда бошед, шумо метавонед кор кунед, make watchто ҳар дафъае, ки шумо файлро дар lib bootstrap таҳрир мекунед, bootstrap ба таври худкор аз нав сохта шавад (ин талаб карда намешавад, танҳо як усули роҳат).

Сатри фармон

Асбоби сатри фармони LESSро тавассути Node насб кунед ва фармони зеринро иҷро кунед:

$ lessc ./less/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 тамошошуда кодро ба файлҳои маҳаллӣ тартиб медиҳад.

Агар хоҳед, шумо метавонед афзалиятҳоро дар барнома барои минификатсияи худкор ва дар кадом директория файлҳои тартибдодашуда иваз кунед.

Бо КАМТАР сохта шудааст

Чаро КАМТАР?

Чӣ дар бар мегирад?

Бисёр омӯхтан

Тағйирёбандаҳо

Миксинҳо

Амалиёт

Тағйирёбандаҳои Bootstrap тағирёбандаҳои LESS, арзишҳои онҳо ва дастурҳои истифода

Пайвастшавӣ ва пайвандҳо

Системаи шабакавӣ

Типография

Ҷадвалҳо

Рангҳои хокистарранг

Рангҳои аксент

Компонентхо

Тугмаҳо

Шаклҳо

Ҳолатҳо ва огоҳиҳо ташкил кунед

Навбар

Равзанаҳои афтанда

Воҳиди қаҳрамон

Миксҳои пурборкунанда

Дар бораи омехтаҳо

Омехтаҳои асосӣ

Омехтаҳои параметрӣ

Ба осонӣ худатонро илова кунед

Миксҳои дохилшуда

Хизматҳои коммуналӣ

Шаклҳо

Типография

Системаи шабакавӣ

Хусусиятҳои CSS3

Замина ва градиентҳо

Тартиб додани Bootstrap бо LESS

Воситаҳо барои тартиб додан

Гиреҳ бо makefile

Сатри фармон

Javascript

Барномаи ғайрирасмии Mac

Барномаҳои бештари Mac

Кранч

CodeKit

Содда