Izmantojot LESS ar Bootstrap

Pielāgojiet un paplašiniet Bootstrap ar LESS — CSS priekšapstrādātāju, lai izmantotu mainīgos, mixins un daudz ko citu, ko izmanto Bootstrap CSS izveidei.

Kāpēc MAZĀK?

Bootstrap pamatā ir LESS — dinamiska stila lapu valoda, ko izveidojis mūsu labs draugs Aleksis Seljē . Tas padara uz sistēmām balstītu CSS izstrādi ātrāku, vienkāršāku un jautrāku.

Kas ir iekļauts?

Kā CSS paplašinājums, LESS ietver mainīgos lielumus, miksus atkārtoti lietojamiem koda fragmentiem, operācijas vienkāršai matemātikai, ligzdošanu un pat krāsu funkcijas.

Uzzināt vairāk

MAZĀK CSS

Apmeklējiet oficiālo vietni http://lesscss.org/ , lai uzzinātu vairāk.

Mainīgie lielumi

Krāsu un pikseļu vērtību pārvaldība CSS var būt nedaudz sāpīga, parasti tas ir pilns ar kopēšanu un ielīmēšanu. Tomēr ne ar LESS — piešķiriet krāsas vai pikseļu vērtības kā mainīgos un mainiet tos vienreiz.

Maisījumi

Šīs trīs robežas rādiusa deklarācijas, kas jums jāiesniedz parastajā CSS? Tagad tie ir izveidoti līdz vienai rindai, izmantojot mixins — koda fragmentus, kurus varat atkārtoti izmantot jebkurā vietā.

Operācijas

Padariet savu režģi, vadošo un īpaši elastīgāku, veicot matemātiku lidojuma laikā ar darbībām. Reiziniet, daliet, pievienojiet un atņemiet savu ceļu uz CSS saprātu.

Sastatnes un saites

@bodyBackground @white Lapas fona krāsa
@textColor @grayDark Noklusējuma teksta krāsa visam pamattekstam, virsrakstiem un citam
@linkColor #08c Noklusējuma saites teksta krāsa
@linkColorHover darken(@linkColor, 15%) Noklusējuma saites teksta kursora virzīšanas krāsa

Režģa sistēma

@gridColumns 12
@gridColumnWidth 60 pikseļi
@gridGutterWidth 20 pikseļi
@fluidGridColumnWidth 6,382978723%
@fluidGridGutterWidth 2,127659574%

Tipogrāfija

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Courier New", monospace
@baseFontSize 13 pikseļi Jābūt pikseļiem
@baseFontFamily @sansFontFamily
@baseLineHeight 18 pikseļi Jābūt pikseļiem
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tabulas

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

Pelēktoņu krāsas

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

Akcentu krāsas

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

Sastāvdaļas

Pogas

@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

Veidlapas

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

Veidlapu stāvokļi un brīdinājumi

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87reklāma
@infoBackground #d9edf7

Navigbar

@navbarHeight 40 pikseļi
@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

Nolaižamās izvēlnes

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

Varoņu vienība

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Par miksiņiem

Pamata maisījumi

Pamata sajaukšana būtībā ir CSS fragmenta iekļaušana vai daļēja daļa. Tie ir rakstīti tāpat kā CSS klase, un tos var izsaukt jebkurā vietā.

  1. . elements {
  2. . clearfix ();
  3. }

Parametriskie maisījumi

Parametru sajaukšana ir gluži kā pamata sajaukšana, taču tā pieņem arī parametrus (tātad arī nosaukumu) ar izvēles noklusējuma vērtībām.

  1. . elements {
  2. . apmale - rādiuss ( 4px );
  3. }

Viegli pievienojiet savu

Gandrīz visi Bootstrap mixins tiek glabāti mixins.less — brīnišķīgā utilīta .less failā, kas ļauj izmantot mixin jebkurā no rīkkopas .less failiem.

Tāpēc turpiniet un izmantojiet esošos vai pievienojiet savu, ja nepieciešams.

Iekļauti maisījumi

Komunālie pakalpojumi

Sajauc Parametri Lietošana
.clearfix() neviens Pievienojiet jebkuram vecākam, lai notīrītu pludiņus
.tab-focus() neviens Izmantojiet Webkit fokusa stilu un noapaļo Firefox kontūru
.center-block() neviens Automātiski centrējiet bloka līmeņa elementu, izmantojotmargin: auto
.ie7-inline-block() neviens Izmantojiet papildus parastajam display: inline-block, lai saņemtu IE7 atbalstu
.size() @height @width Ātri iestatiet augstumu un platumu vienā rindā
.square() @size Tiek veidots , .size()lai iestatītu platumu un augstumu kā vienu un to pašu vērtību
.opacity() @opacity Iestatiet necaurredzamības procentuālo vērtību veselos skaitļos (piemēram, "50" vai "75").

Veidlapas

Sajauc Parametri Lietošana
.placeholder() @color: @placeholderText Iestatiet placeholderievades teksta krāsu

Tipogrāfija

Sajauc Parametri Lietošana
#font > #family > .serif() neviens Lieciet elementam izmantot serif fontu kopu
#font > #family > .sans-serif() neviens Lieciet elementam izmantot sans-serif fontu kopu
#font > #family > .monospace() neviens Lieciet elementam izmantot monospace fontu kopu
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Viegli iestatiet fonta lielumu, svaru un priekšējo daļu
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Iestatiet fontu saimi uz serif, kā arī kontrolējiet izmēru, svaru un ievadu
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Iestatiet fontu saimi uz sans-serif un kontrolējiet izmēru, svaru un ievadu
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Iestatiet fontu saimi uz monospace un kontrolējiet izmēru, svaru un sākumposmu

Režģa sistēma

Sajauc Parametri Lietošana
.container-fixed() neviens Izveidojiet horizontāli centrētu konteineru satura glabāšanai
#grid > .core() @gridColumnWidth, @gridGutterWidth Izveidojiet pikseļu režģa sistēmu (konteineru, rindu un kolonnas) ar n kolonnām un x pikseļu platu noteku
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Izveidojiet procentuālo režģa sistēmu ar n kolonnām un x % platu notekcauruli
#grid > .input() @gridColumnWidth, @gridGutterWidth Ģenerējiet elementu pikseļu režģa sistēmu input, ņemot vērā polsterējumu un apmales
.makeColumn @columns: 1, @offset: 0 Pārvērtiet jebkuru divpar režģa kolonnu bez .span*klasēm

CSS3 rekvizīti

Sajauc Parametri Lietošana
.border-radius() @radius Noapaļo elementa stūrus. Var būt viena vērtība vai četras ar atstarpi atdalītas vērtības
.box-shadow() @shadow Pievienojiet elementam krītošu ēnu
.transition() @transition Pievienojiet CSS3 pārejas efektu (piem., all .2s linear)
.rotate() @degrees Pagriezt elementu par n grādiem
.scale() @ratio Mērogojiet elementu līdz n reizēm lielākam par tā sākotnējo izmēru
.translate() @x, @y Pārvietojiet elementu x un y plaknēs
.background-clip() @clip Elementa fona apgriešana (noderīga border-radius)
.background-size() @size Kontrolējiet fona attēlu lielumu, izmantojot CSS3
.box-sizing() @boxmodel Mainiet elementa lodziņa modeli (piemēram, border-boxpilna platuma input)
.user-select() @select Kontrolējiet kursora teksta atlasi lapā
.backface-visibility() @visibility: visible Novērsiet satura mirgošanu, izmantojot CSS 3D transformācijas
.resizable() @direction: both Padariet jebkura elementa izmēru maināmu labajā un apakšējā daļā
.content-columns() @columnCount, @columnGap: @gridGutterWidth Lieciet jebkura elementa saturam izmantot CSS3 kolonnas
.hyphens() @mode: auto CSS3 defise, kad vēlaties (ietver word-wrap: break-word)

Foni un gradienti

Sajauc Parametri Lietošana
#translucent > .background() @color: @white, @alpha: 1 Piešķiriet elementam caurspīdīgu fona krāsu
#translucent > .border() @color: @white, @alpha: 1 Piešķiriet elementam caurspīdīgu apmales krāsu
#gradient > .vertical() @startColor, @endColor Izveidojiet vertikālu fona gradientu starp pārlūkprogrammām
#gradient > .horizontal() @startColor, @endColor Izveidojiet horizontālu fona gradientu starp pārlūkprogrammām
#gradient > .directional() @startColor, @endColor, @deg Izveidojiet starppārlūkprogrammu virziena fona gradientu
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Izveidojiet vairāku pārlūkprogrammu trīskrāsu fona gradientu
#gradient > .radial() @innerColor, @outerColor Izveidojiet starppārlūkprogrammu radiālo fona gradientu
#gradient > .striped() @color, @angle Izveidojiet starppārlūkprogrammu svītrainu fona gradientu
#gradientBar() @primaryColor, @secondaryColor Izmanto pogām, lai piešķirtu gradientu un nedaudz tumšāku apmali
Piezīme. Ja iesniedzat izvilkšanas pieprasījumu GitHub ar modificētu CSS, jums ir jāpārkompilē CSS, izmantojot kādu no šīm metodēm.

Rīki kompilēšanai

Mezgls ar makefile

Instalējiet LESS komandrindas kompilatoru, JSHint, Recess un uglify-js globāli ar npm, izpildot šo komandu:

$ npm instalēt -g mazāk jshint padziļinājums uglify-js

Pēc instalēšanas vienkārši palaidiet makeno sāknēšanas direktorija saknes, un viss ir gatavs.

Turklāt, ja jums ir instalēta programma Watchr , varat palaist make watch, lai bootstrap tiktu automātiski pārbūvēts ikreiz, kad rediģējat failu bootstrap lib (tas nav nepieciešams, tas ir tikai ērtību metode).

Komandrinda

Instalējiet komandrindas rīku LESS, izmantojot Node, un palaidiet šādu komandu:

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

Noteikti iekļaujiet --compressšo komandu, ja mēģināt saglabāt dažus baitus!

Javascript

Lejupielādējiet jaunāko Less.js un iekļaujiet ceļu uz to (un Bootstrap) mapē <head>.

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

Lai atkārtoti kompilētu .less failus, vienkārši saglabājiet tos un atkārtoti ielādējiet savu lapu. Less.js tos apkopo un saglabā vietējā krātuvē.

Neoficiāla Mac lietotne

Neoficiālā Mac lietotne skatās .less failu direktorijus un apkopo kodu vietējos failos pēc katras skatītā .less faila saglabāšanas.

Ja vēlaties, lietotnē varat pārslēgt preferences, lai automātiski samazinātu un kurā direktorijā nonāk apkopotie faili.

Vairāk Mac lietotņu

Crunch

Crunch ir lieliska izskata LESS redaktors un kompilators, kas balstīts uz Adobe Air.

CodeKit

CodeKit ir Mac lietojumprogramma, ko izveidojis tas pats puisis, kas ir neoficiālā Mac lietotne, kas apkopo LESS, SASS, Stylus un CoffeeScript.

Vienkāršs

Mac, Linux un PC lietotne MAZĀK failu kompilēšanai, velkot un nometot. Turklāt pirmkods atrodas vietnē GitHub .