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

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

Чаро КАМТАР?

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

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

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

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

КАМТАР CSS

Барои гирифтани маълумоти бештар ба вебсайти расмии 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 навишта шудаанд ва онҳоро дар ҳама ҷо даъват кардан мумкин аст.

  1. . элемент {
  2. . clearfix ();
  3. }

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

Миксинҳои параметрӣ мисли омехтаи асосӣ аст, аммо он инчунин параметрҳоро (аз ин рӯ ном дорад) бо арзишҳои пешфарзии ихтиёрӣ қабул мекунад.

  1. . элемент {
  2. . сарҳад - радиус ( 4px );
  3. }

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

Қариб ҳамаи миксинҳои 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 тамошошуда кодро ба файлҳои маҳаллӣ тартиб медиҳад.

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

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

Кранч

Crunch як муҳаррири зебои LESS ва компиляторест, ки дар Adobe Air сохта шудааст.

CodeKit

CodeKit аз ҷониби ҳамон бача, ки барномаи ғайрирасмии Mac сохта шудааст, як барномаи Mac мебошад, ки LESS, SASS, Stylus ва CoffeeScript-ро тартиб медиҳад.

Содда

Барномаи Mac, Linux ва компютер барои кашола кардан ва тарк кардани файлҳои LESS. Илова бар ин, рамзи сарчашма дар GitHub аст .