Bootstrap bilen LESS ulanmak

Bootstrap-yň CSS-ni gurmak üçin ulanylýan üýtgeýänlerden, garyndylardan we has köp peýdalanmak üçin Bootstrap-y CSS deslapky prosessor LESS bilen düzüň we giňeldiň.

Näme üçin az?

“Bootstrap” öz dostumyz Aleksis Sellier tarapyndan döredilen dinamiki stil sahypasy bolan LESS bilen ýasalýar . Ulgam esasly CSS-ni ösdürmegi has çalt, aňsat we has gyzykly edýär.

Näme girýär?

CSS-iň giňelmesi hökmünde LESS üýtgeýjileri, gaýtadan ulanylýan kod bölekleri üçin garyndylary, ýönekeý matematika amallary, höwürtge we hatda reňk funksiýalaryny öz içine alýar.

Köpräk oka

Kiçijik CSS

Has giňişleýin maglumat üçin http://lesscss.org/ resmi web sahypasyna giriň .

Üýtgeýjiler

CSS-de reňkleri we piksel bahalaryny dolandyrmak birneme agyry bolup biler, adatça göçürmek we goýmak bilen doly. LESS bilen däl-de, reňkleri ýa-da piksel bahalaryny üýtgeýjiler hökmünde belläň we bir gezek üýtgediň.

Mixins

Şol üç serhet radiusynyň deklarasiýasyny yzygiderli “CSS” -de etmeli? Indi olar islendik ýerde gaýtadan ulanyp boljak garyndylaryň, kod bölekleriniň kömegi bilen bir setire düşýärler.

Amallar

Amallar bilen uçuşda matematikany ýerine ýetirip, gözenegiňizi öňdebaryjy we has çeýe ediň. CSS saglygyna ýoluňyzy köpeldiň, bölüň, goşuň we aýyryň.

Skaf we baglanyşyklar

@bodyBackground @white Sahypanyň fon reňki
@textColor @grayDark Bütin beden, sözbaşylar we başgalar üçin tekstiň reňki
@linkColor #08c Bellenen baglanyşyk tekstiniň reňki
@linkColorHover darken(@linkColor, 15%) Bellenen baglanyşyk tekstiniň reňki

Grid ulgamy

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

Tipografiýa

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Courier New", monospace
@baseFontSize 13px Piksel bolmaly
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Piksel bolmaly
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tablisa

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

Çal reňkli reňkler

@black # 000
@grayDarker # 222
@grayDark # 333
@gray # 555
@grayLight # 999
@grayLighter #eee
@white #fff

Çalt reňkler

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

Komponentler

Düwmeler

@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

Formalar

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

Döwletler we duýduryşlar

@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

Açylýan ýerler

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Gahryman bölümi

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Garyndylar hakda

Esasy garyndylar

Esasy garyndy, esasan, CSS-iň bir bölegi üçin bir bölegi ýa-da bölekleýin. Olar edil CSS synpy ýaly ýazylandyr we islendik ýere jaň edip bolýar.

  1. . element {
  2. . Clearfix ();
  3. }

Parametrik garyndylar

Parametrik garyndy, edil esasy garyndy ýalydyr, ýöne goşmaça başlangyç bahalary bilen parametrleri (şonuň üçin ady) kabul edýär.

  1. . element {
  2. . araçäk - radius ( 4px );
  3. }

Özüňizi aňsatlyk bilen goşuň

“Bootstrap” -yň garyndylarynyň hemmesi diýen ýaly mixins.less-da saklanýar, gurallar toplumyndaky .less faýllaryň islendik birinde garyndyny ulanmaga mümkinçilik berýän ajaýyp peýdaly .less faýly.

Şeýlelik bilen, dowam ediň we bar bolanlaryny ulanyň ýa-da zerur bolanda özüňizi goşup bilersiňiz.

Goşulan garyndylar

Kärhanalar

Mixin Parametrler Ulanylyşy
.clearfix() hiç Içindäki ýüzüşleri arassalamak üçin islendik ene-ata goşuň
.tab-focus() hiç Webkit fokus stilini we Firefox tegelek görnüşini ulanyň
.center-block() hiç Ulanylýan blok derejeli elementi awtomatik merkezleşdiriňmargin: auto
.ie7-inline-block() hiç display: inline-blockIE7 goldawyny almak üçin yzygiderli ulanyň
.size() @height @width Boýy we ini bir setirde çalt düzüň
.square() @size Inini .size()we beýikligini şol bir baha bilen kesgitlemek üçin gurulýar
.opacity() @opacity Umuman, açyklyk göterimini düzüň (mysal üçin, "50" ýa-da "75")

Formalar

Mixin Parametrler Ulanylyşy
.placeholder() @color: @placeholderText placeholderGirişler üçin tekst reňkini düzüň

Tipografiýa

Mixin Parametrler Ulanylyşy
#font > #family > .serif() hiç Bir elementi serif şrift stakasyny ulanyň
#font > #family > .sans-serif() hiç Sans-serif şrift toplumyny ulanyň
#font > #family > .monospace() hiç Bir elementi monospace şrift toplumyny ulanyň
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Şriftiň ululygyny, agramyny we öňdebaryjylygyny aňsatlyk bilen düzüň
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Şrift maşgalasyny serif edip düzüň, ululygyny, agramyny we öňdebaryjylygyny dolandyryň
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Şrift maşgalasyny sans-serif-e düzüň we ululygyny, agramyny we öňdebaryjylygyny dolandyryň
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Şrift maşgalasyny monospace düzüň we ululygyny, agramyny we öňdebaryjylygyny dolandyryň

Grid ulgamy

Mixin Parametrler Ulanylyşy
.container-fixed() hiç Mazmunyňyzy saklamak üçin keseligine merkezleşdirilen konteýner dörediň
#grid > .core() @gridColumnWidth, @gridGutterWidth N sütünleri we x piksel giňligi bilen piksel gözenek ulgamyny (konteýner, hatar we sütünler) dörediň
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth N sütünleri we x % giňligi bilen göterim set ulgamyny dörediň
#grid > .input() @gridColumnWidth, @gridGutterWidth Elementler üçin piksel gözenek ulgamyny dörediň, inputpadding we serhetleri hasaba alyň
.makeColumn @columns: 1, @offset: 0 Islendik birini divsapaksyz gözenegiň sütünine .span*öwüriň

CSS3 häsiýetleri

Mixin Parametrler Ulanylyşy
.border-radius() @radius Bir elementiň burçlaryny tegelekläň. Singleeke-täk baha ýa-da boşluk bilen bölünen dört baha bolup biler
.box-shadow() @shadow Bir elemente damja kölegesini goşuň
.transition() @transition CSS3 geçiş effektini goşuň (mysal üçin all .2s linear)
.rotate() @degrees Bir elementi n dereje öwrüň
.scale() @ratio Bir elementi asyl ululygyndan n esse ulaldyň
.translate() @x, @y Bir elementi x we ​​y uçarlarynda süýşüriň
.background-clip() @clip Bir elementiň fonuny kesiň (peýdaly border-radius)
.background-size() @size CSS3 arkaly fon suratlarynyň ululygyna gözegçilik ediň
.box-sizing() @boxmodel Bir element üçin guty modelini üýtgediň (mysal border-boxüçin, doly giňlik üçin input)
.user-select() @select Sahypadaky tekstiň kursor saýlamasyna gözegçilik
.backface-visibility() @visibility: visible CSS 3D üýtgeşmelerini ulananyňyzda mazmunyň çişmeginiň öňüni alyň
.resizable() @direction: both Islendik elementi sag we aşaky görnüşde üýtgedip bilersiňiz
.content-columns() @columnCount, @columnGap: @gridGutterWidth Islendik elementiň mazmunyny CSS3 sütünlerini ulanyň
.hyphens() @mode: auto Islän wagtyňyz CSS3 defisasiýa (öz içine alýar word-wrap: break-word)

Düşündirişler we gradiýentler

Mixin Parametrler Ulanylyşy
#translucent > .background() @color: @white, @alpha: 1 Bir elemente aç-açan reňk beriň
#translucent > .border() @color: @white, @alpha: 1 Bir elemente aç-açan araçäk reňk beriň
#gradient > .vertical() @startColor, @endColor Kesgitli brauzeriň dik fon gradiýentini dörediň
#gradient > .horizontal() @startColor, @endColor Kesgitli brauzer keseligine fon gradientini dörediň
#gradient > .directional() @startColor, @endColor, @deg Kesgitli brauzeriň ugrukdyryjy fon gradiýentini dörediň
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Üç reňkli fon gradientini kesip geçiň
#gradient > .radial() @innerColor, @outerColor Kesgitli brauzer radial fon gradientini dörediň
#gradient > .striped() @color, @angle Kesgitli brauzer zolakly fon gradientini dörediň
#gradientBar() @primaryColor, @secondaryColor Gradient we birneme garaňky araçäk bellemek üçin düwmeler üçin ulanylýar
Bellik: Üýtgedilen CSS bilen GitHub-a çekmek haýyşyny iberýän bolsaňyz , CSS-ni şu usullaryň haýsydyr biriniň üsti bilen täzeden düzmeli .

Toplamak üçin gurallar

Makfile bilen düwün

Aşakdaky buýrugy işledip, npm bilen LESS buýruk setiri düzüjisini, JSHint, Recess we uglify-js guruň.

$ npm gurnamak -g az jshint dynç alyşy uglify-js

Gurlandan soň, bootstrap katalogyňyzyň kökünden işlediň makewe hemmäňiz taýyn.

Mundan başga-da, sagat gurnan bolsaňyz, make watchher gezek bootstrap lib-de bir faýl redaktirläniňizde bootstrap awtomatiki usulda täzeden gurlup bilner (bu hökman däl, diňe amatly usul).

Buýruk setiri

Node arkaly LESS buýruk setir guralyny guruň we aşakdaky buýrugy işlediň:

$ lessc ./less/bootstrap.less> bootstrap.css

--compressKäbir baýtlary tygşytlamaga synanyşýan bolsaňyz, şol buýruga goşuň !

Javascript

Iň soňky Less.js-i göçürip alyň we oňa barýan ýoly (we Bootstrap) goşuň <head>.

<link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>  
 

.Faýlsyz faýllary täzeden düzmek üçin olary ýatda saklaň we sahypaňyzy täzeden ýükläň. Less.js olary düzýär we ýerli ammarda saklaýar.

Resmi däl Mac programmasy

Resmi däl Mac programmasy .less faýllaryň kataloglaryna tomaşa edýär we synlanan .less faýly ýatda saklandan soň kody ýerli faýllara düzýär.

Isleseňiz, awtomatiki kiçeltmek üçin programmada ileri tutmalary üýtgedip bilersiňiz we düzülen faýllaryň haýsy bukjasy gutarýar.

Has köp Mac programmalary

Gyryş

Crunch, Adobe Air-da gurlan ajaýyp görünýän LESS redaktory we düzüjisi.

CodeKit

Resmi däl Mac programmasy bilen bir adam tarapyndan döredilen CodeKit, LESS, SASS, Stylus we CoffeeScript-i düzýän Mac programmasydyr.

Pleönekeý

LESS faýllaryny süýräp çekmek üçin Mac, Linux we PC programmasy. Mundan başga-da, deslapky kod GitHub-da .