Panagusar ti LESS iti Bootstrap
Ipasayaat ken palawaen ti Bootstrap babaen ti LESS , maysa a preprosesor ti CSS, tapno magundawayan dagiti variable, mixin, ken dadduma pay a maus-usar a mangbangon ti CSS ti Bootstrap.
Naibangon nga addaan iti LESS
Apay a BASSIT?
Ti Bootstrap ket naaramid nga addaan iti LESS iti kangrunaanna, maysa a dinamiko a pagsasao ti stylesheet a pinartuat babaen ti nasayaat a gayyemtayo, ni Alexis Sellier . Daytoy ket mangaramid ti panagparang-ay kadagiti sistema-a naibatay a CSS a naparpartak, nalaklaka, ken ad-adda a makaay-ayo.
Ania ti nairaman?
Kas maysa a panagpaatiddog ti CSS, ti LESS ket mangiraman kadagiti variable, dagiti mixin para kadagiti mausar manen a snippet ti kodigo, dagiti panagpataray para iti simple a matematika, panagumok, ken urayno dagiti panagandar ti kolor.
Ammuem ti ad-adu pay
Bisitaen ti opisial a website iti http://lesscss.org/ tapno maammuan ti ad-adu pay.
Dagiti Variable
Ti panangituray kadagiti kolor ken dagiti pateg ti pixel iti CSS ket mabalin a bassit a saem, kadawyan a napno iti kopia ken i-paste. Saan a babaen ti LESS nupay kasta—ituding dagiti kolor wenno dagiti pateg ti pixel a kas dagiti variable ken baliwam dagitoy a maminsan.
Dagiti mixin
Dagita tallo a border-radius declarations a kasapulam nga aramiden iti regular ol' CSS? Ita ket bimmabadan iti maysa a linia babaen ti tulong dagiti mixin, dagiti snippet ti kodigo a mabalinmo nga usaren manen iti sadinoman.
Dagiti Operasion
Pagbalinem ti grid-mo, mangidadaulo, ken ad-adda a super flexible babaen ti panangaramid iti matematika iti tumatayab nga addaan kadagiti operasion. Paaduen, bingayen, inayon, ken kissayan ti dalanmo iti CSS sanity.
Dagiti variable ti bootstrap LESS dagiti variable, dagiti pategda, ken dagiti pagannurotan ti panagusar
Andamio ken silpo
@bodyBackground |
@white |
Kolor ti likudan ti panid | |
@textColor |
@grayDark |
Default a kolor ti teksto para iti intero a bagi, paulo, ken dadduma pay | |
@linkColor |
#08c |
Default a kolor ti teksto ti silpo | |
@linkColorHover |
darken(@linkColor, 15%) |
Default a kolor ti hover ti teksto ti silpo |
Sistema ti grid
@gridColumns |
12 nga |
@gridColumnWidth |
60px nga |
@gridGutterWidth |
20px nga |
@fluidGridColumnWidth |
6.382978723 nga % |
@fluidGridGutterWidth |
2.127659574 nga % |
Tipograpia
@sansFontFamily |
"Helvetica nga Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Mónaco, "Courier Baro", monoespacio | |
@baseFontSize |
13px nga | Masapul a pixels |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px nga | Masapul a pixels |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Dagiti Lamisaan
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Dagiti kolor nga grayscale
@black |
#000 nga | |
@grayDarker |
#222 nga | |
@grayDark |
#333 nga | |
@gray |
#555 nga | |
@grayLight |
#999 nga | |
@grayLighter |
#eee nga | |
@white |
#fff nga |
Dagiti kolor ti aksento
@blue |
#049 nga cdb | |
@green |
#46a546 nga | |
@red |
#9d261d nga | |
@yellow |
#ffc40d nga | |
@orange |
# f89406 nga | |
@pink |
# c3325 nga | |
@purple |
#7a43b6 nga |
Dagiti paset
Dagiti Buton
@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 |
Dagiti Pormas
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Pormaen dagiti estado ken alerto
@warningText |
# c09853 nga | |
@warningBackground |
#f3edd2 nga | |
@errorText |
# b94a48 nga | |
@errorBackground |
#f2dede nga | |
@successText |
#468847 nga | |
@successBackground |
# dff0d8 nga | |
@infoText |
#3a87 nga ad | |
@infoBackground |
# d9edf7 nga |
Navbar nga
@navbarHeight |
40px nga | |
@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 |
Dagiti dropdown
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
Bannuar nga yunit
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Dagiti mixins ti bootstrap
Maipapan kadagiti mixins
Dagiti kangrunaan a mixins
Ti batayan a mixin ket nasken a maysa a mairaman wenno ti paset para iti maysa a snippet ti CSS. Naisurat dagitoy a kasla klase ti CSS ken mabalin nga awagan iti sadinoman.
- . elemento nga { .
- . nalawag a panangtarimaan ();
- } nga
Dagiti parametriko a mixin
Ti parametriko a mixin ket kasla laeng ti batayan a mixin, ngem daytoy ket mangawat pay kadagiti parametro (gapuna ti nagan) nga addaan kadagiti pagpilian a default a pateg.
- . elemento nga { .
- . beddeng - radius ( 4px );
- } nga
Nalaka laeng nga inayon ti bukodmo
Dandani amin dagiti mixin ti Bootstrap ket naidulin kadagiti mixins.less, maysa a nakaskasdaaw a utilidad a .less a file a mangpabalin kenka nga agusar ti mixin iti ania man kadagiti .less a file iti toolkit.
Gapuna, sige ket usarem dagiti addan wenno agwayawayaka a mangnayon iti bukodmo kas kasapulam.
Nairaman dagiti mixins
Dagiti Utilities
| Mixin nga | Dagiti Parametro | Panagusar |
|---|---|---|
.clearfix() |
awan | Inayon iti aniaman a nagannak tapno ma-clear dagiti float iti uneg |
.tab-focus() |
awan | Iyaplikar ti estilo ti pokus ti Webkit ken nagtimbukel a balabala ti Firefox |
.center-block() |
awan | Auto center ti maysa a bloke-level nga elemento nga agus-usarmargin: auto |
.ie7-inline-block() |
awan | Usaren malaksid iti regular display: inline-blocktapno makagun-od iti suporta ti IE7 |
.size() |
@height @width |
Napardas nga ikeddeng ti kangato ken kalawa iti maysa a linia |
.square() |
@size |
Builds on .size()tapno mangikeddeng ti kalawa ken kangato a kas ti isu met laeng a pateg |
.opacity() |
@opacity |
Itakderan, kadagiti sibubukel a numero, ti porsiento ti opasidad (kas pagarigan, "50" wenno "75") . |
Dagiti Pormas
| Mixin nga | Dagiti Parametro | Panagusar |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Itakderan ti placeholderkolor ti teksto para kadagiti input |
Tipograpia
| Mixin nga | Dagiti Parametro | Panagusar |
|---|---|---|
#font > #family > .serif() |
awan | Mangaramid ti maysa nga elemento nga agusar ti serif font stack |
#font > #family > .sans-serif() |
awan | Mangaramid ti maysa nga elemento nga agusar ti sans-serif a font stack |
#font > #family > .monospace() |
awan | Mangaramid ti maysa nga elemento nga agusar ti monospace font stack |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Nalaka nga i-set ti kadakkel ti font, kadagsen, ken leading |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Itakderan ti pamilia ti letra iti serif, ken kontrolen ti kadakkel, dagsen, ken leading |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Itakderan ti pamilia ti letra iti sans-serif, ken kontrolen ti kadakkel, dagsen, ken leading |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Itakderan ti pamilia ti letra iti monospace, ken kontrolen ti kadakkel, dagsen, ken mangidaulo |
Sistema ti grid
| Mixin nga | Dagiti Parametro | Panagusar |
|---|---|---|
.container-fixed() |
awan | Mangaramidka iti horizontally centered container para iti panangiggem iti linaonmo |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Mangpataud ti sistema ti grid ti pixel (container, hilera, ken dagiti adigi) nga addaan kadagiti n nga adigi ken x pixel a kalawa a kanal |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Mangpataud ti porsiento a sistema ti grid nga addaan iti n nga adigi ken x % a nalawa a kanal |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Mangpataud ti sistema ti pixel grid para kadagiti inputelemento, panagkuenta para iti padding ken dagiti beddeng |
.makeColumn |
@columns: 1, @offset: 0 |
Pagbalinen ti aniaman diva grid column nga awan dagiti .span*klase |
Dagiti tagikua ti CSS3
| Mixin nga | Dagiti Parametro | Panagusar |
|---|---|---|
.border-radius() |
@radius |
Timbukelan dagiti suli ti maysa nga elemento. Mabalin a maymaysa a pateg wenno uppat a pateg a naisina iti espasio |
.box-shadow() |
@shadow |
Manginayon ti drop shadow iti maysa nga elemento |
.transition() |
@transition |
Inayon ti epekto ti panagbalbaliw ti CSS3 (kas pagarigan, all .2s linear) . |
.rotate() |
@degrees |
I-rotate ti maysa nga elemento n degrees |
.scale() |
@ratio |
I-scale ti maysa nga elemento iti n a daras ti orihinal a kadakkelna |
.translate() |
@x, @y |
Iyakar ti maysa nga elemento kadagiti plano ti x ken y |
.background-clip() |
@clip |
Putden ti likudan ti maysa nga elemento (mausar para iti border-radius) . |
.background-size() |
@size |
Kontrolem ti kadakkel dagiti ladawan ti likudan babaen ti CSS3 |
.box-sizing() |
@boxmodel |
Baliwan ti modelo ti kahon para iti maysa nga elemento (kas pagarigan, border-boxpara iti naan-anay a kalawa input) . |
.user-select() |
@select |
Kontrolem ti panagpili ti kursor ti teksto iti maysa a panid |
.backface-visibility() |
@visibility: visible |
Lapdan ti panagkidem ti linaon no agusar kadagiti CSS 3D a panagbalbaliw |
.resizable() |
@direction: both |
Aramiden ti aniaman nga elemento a mabaliwan ti kadakkelna iti kannawan ken baba |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Aramiden ti linaon ti ania man nga elemento nga agusar kadagiti kolum ti CSS3 |
.hyphens() |
@mode: auto |
CSS3 hyphenation no kayatmo (iraman ti word-wrap: break-word) . |
Dagiti likudan ken gradient
| Mixin nga | Dagiti Parametro | Panagusar |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Ikkan ti maysa nga elemento iti translucent a kolor ti likudan |
#translucent > .border() |
@color: @white, @alpha: 1 |
Ikkan ti maysa nga elemento iti translucent a kolor ti beddeng |
#gradient > .vertical() |
@startColor, @endColor |
Mangaramid ti krus-browser a bertikal a background gradient |
#gradient > .horizontal() |
@startColor, @endColor |
Mangaramid ti krus-browser a horizontal a background gradient |
#gradient > .directional() |
@startColor, @endColor, @deg |
Mangaramid ti krus-browser a direksion a likudan a gradient |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Mangaramid ti krus-browser a tallo a kolor a background gradient |
#gradient > .radial() |
@innerColor, @outerColor |
Mangaramid ti krus-browser a radial a likudan a gradient |
#gradient > .striped() |
@color, @angle |
Mangaramid ti krus-browser a garitgaritan a background gradient |
#gradientBar() |
@primaryColor, @secondaryColor |
Nausar para kadagiti buton a mangituding iti gradient ken nasipnget bassit a beddeng |
Panagtipon ti Bootstrap nga addaan iti LESS
Dagiti ramit para iti panagtipon
Nodo nga addaan iti makefile
I-install ti LESS a linia ti bilin a kompiler, JSHint, Recess, ken uglify-js a sangalubongan babaen ti npm babaen ti panangipataray ti sumaganad a bilin:
$ npm mangikabil -g basbassit jshint recess uglify-js
Apaman a nai-install ket agtarayka laeng makemanipud iti ramut ti bootstrap directory-mo ket nakasaganaka amin.
Mainayon pay, no addaanka iti watchr a naikabil, mabalinmo ti agtaray make watchtapno ti bootstrap ket automatiko a maibangon manen tunggal maysa nga i-editmo ti maysa a papeles iti bootstrap lib (daytoy ket saan a kasapulan, maysa laeng a pamay-an ti kombeniente).
Linya ti bilin
I-install ti ramit ti linia ti bilin ti LESS babaen ti Node ken patarayen ti sumaganad a bilin:
$ lessc ./basbassit/bootstrap.less > bootstrap.css
Siguraduenyo nga iraman --compressiti dayta a bilin no padpadasem nga i-save ti sumagmamano a byte!
Javascript nga isurat
I-download ti kaudian a Less.js ken iraman ti dalan nga agturong iti dayta (ken Bootstrap) iti <head>.
<link rel = "stylesheet/basbassit" href = "/dalan/agingga/bootstrap.basbassit" > <script src = "/dalan/iti/basbassit.js" ></script>
Tapno maurnong manen dagiti .less a file, i-save laeng dagitoy ken ikarga manen ti panidmo. Ti Less.js ket mangtipon kadagitoy ken mangidulin kadagitoy iti lokal a pagipempenan.
Di opisial nga app ti Mac
Ti saan nga opisial a Mac app ket mangbuybuya kadagiti direktorio dagiti .less a file ken mangtipon iti kodigo kadagiti lokal a file kalpasan ti tunggal panagidulin ti nabuya a .less a file.
No kayatmo, mabalinmo nga i-toggle dagiti preferences iti app para iti automatic minifying ken no ania a direktorio ti pagtungpalan dagiti naurnong a file.
Ad-adu pay nga app ti Mac
Crunch nga
Ti Crunch ket maysa a nagsayaat ti langana a LESS editor ken compiler a naibangon iti Adobe Air.
CodeKit nga
Pinartuat ti isu met laeng a lalaki a kas iti saan nga opisial a Mac app, ti CodeKit ket maysa a Mac app a mangtipon iti LESS, SASS, Stylus, ken CoffeeScript.
Awan Simple
Mac, Linux, ken PC app para iti drag and drop a panagtipon kadagiti LESS a file. Plus, ti taudan a kodigo ket adda iti GitHub .