Bootstrap менен LESS колдонуу

Bootstrap'тин CSS түзүү үчүн колдонулган өзгөрмөлөрдүн, миксиндердин жана башкалардын артыкчылыктарын алуу үчүн LESS, CSS препроцессору менен Bootstrapти ыңгайлаштырыңыз жана кеңейтиңиз.

Эмне үчүн АЗ?

Bootstrap негизги LESS менен жасалган, биздин жакшы досубуз Алексис Селлиер тарабынан түзүлгөн динамикалык стилдер жадыбалынын тили . Бул системаларга негизделген CSS иштеп чыгууну тезирээк, оңой жана кызыктуураак кылат.

Эмне камтылган?

CSS кеңейтүүсү катары LESS өзгөрмөлөрдү, коддун көп жолу колдонулуучу фрагменттери үчүн миксиндерди, жөнөкөй математика үчүн операцияларды, уя салууларды жана ал тургай түс функцияларын камтыйт.

Көбүрөөк билүү

АЗ CSS

Көбүрөөк билүү үчүн http://lesscss.org/ расмий веб-сайтына кириңиз .

Өзгөрмөлөр

CSSте түстөрдү жана пикселдик маанилерди башкаруу бир аз кыйналышы мүмкүн, адатта көчүрүү жана чаптоо менен толгон. LESS менен эмес — түстөрдү же пикселдик маанилерди өзгөрмө катары дайындап, аларды бир жолу өзгөртүңүз.

Миксиндер

Ушул үч чек ара радиусу декларациясын сиз кадимки 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 #fff

Акцент түстөр

@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6

Компоненттер

Buttons

@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

Navbar

@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 файлдарынын каалаганында колдонууга мүмкүндүк берет.

Андыктан, улантып, барларды колдонуңуз же өзүңүздүн каалаганыңызды кошуудан тартынбаңыз.

Миксиндер камтылган

Утилиталар

Mixin Параметрлер Колдонуу
.clearfix() эч ким Ичиндеги сүзмөлөрдү тазалоо үчүн каалаган ата-энеге кошуңуз
.tab-focus() эч ким Webkit фокус стилин жана тегерек Firefox контурун колдонуңуз
.center-block() эч ким Блок деңгээлиндеги элементти автоматтык түрдө борборлоштурууmargin: auto
.ie7-inline-block() эч ким display: inline-blockIE7 колдоосун алуу үчүн кадимкидей эле колдонуңуз
.size() @height @width Бийиктигин жана туурасын бир сапка тез орнотуңуз
.square() @size Туурасы .size()менен бийиктигин бирдей мааниге коюу үчүн курулат
.opacity() @opacity Тунуктуулук пайызын бүтүн сандар менен коюңуз (мисалы, "50" же "75")

Формалар

Mixin Параметрлер Колдонуу
.placeholder() @color: @placeholderText placeholderКиргизүү үчүн тексттин түсүн коюңуз

Типография

Mixin Параметрлер Колдонуу
#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 Ариптер үй-бүлөсүн мономейкиндикке коюп, өлчөмүн, салмагын жана алдыңкылыгын көзөмөлдөңүз

Тор системасы

Mixin Параметрлер Колдонуу
.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 касиеттери

Mixin Параметрлер Колдонуу
.border-radius() @radius Элементтин бурчтарын тегеретиңиз. Жалгыз маани же мейкиндик менен бөлүнгөн төрт маани болушу мүмкүн
.box-shadow() @shadow Элементке тамчы көлөкө кошуу
.transition() @transition CSS3 өтүү эффектин кошуу (мисалы, all .2s linear)
.rotate() @degrees Элементти n градуска буруңуз
.scale() @ratio Элементти баштапкы өлчөмүнөн n эсеге чейин масштабдаңыз
.translate() @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)

Фондор жана градиенттер

Mixin Параметрлер Колдонуу
#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

Орнотулгандан кийин жөн гана makebootstrap каталогуңуздун түбүнөн иштетиңиз жана баары даяр.

Кошумчалай кетсек , эгер сизде watchr орнотулган болсо, сиз жүктөө libиндеги файлды түзөткөн make watchсайын жүктөөчү линияны автоматтык түрдө кайра куруу үчүн чуркай аласыз (бул талап кылынбайт, жөн гана ыңгайлуу ыкма).

Command line

Node аркылуу LESS буйрук сабы куралын орнотуп, төмөнкү буйрукту аткарыңыз:

$ 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 файлдарын кайра компиляциялоо үчүн аларды сактап, баракчаңызды кайра жүктөңүз. Less.js аларды компиляциялап, жергиликтүү сактагычта сактайт.

Расмий эмес Mac колдонмосу

Бейрасмий Mac колдонмосу .less файлдарынын каталогдорун карап, көргөн .less файлын ар бир сактагандан кийин кодду жергиликтүү файлдарга түзөт.

Кааласаңыз, колдонмодогу артыкчылыктарды автоматтык түрдө кичирейтүү жана компиляцияланган файлдар кайсы каталогдо бүтөрүн которуштурууга болот.

Көбүрөөк Mac колдонмолору

Crunch

Crunch – бул Adobe Airде курулган эң сонун LESS редактору жана компилятору.

CodeKit

Бейрасмий Mac колдонмосу менен бир эле жигит тарабынан түзүлгөн CodeKit – LESS, SASS, Stylus жана CoffeeScriptти түзгөн Mac колдонмосу.

Жөнөкөй

Mac, Linux жана PC колдонмосу LESS файлдарын сүйрөп барып түшүрүү үчүн. Мындан тышкары, булак коду GitHub .