LESS a wode bedi dwuma wɔ Bootstrap mu
Fa LESS , CSS preprocessor, yɛ Bootstrap no ho nhyehyɛe na trɛw mu , na ama woanya mfaso afi nsakrae ahorow, mixins, ne nea ɛkeka ho a wɔde yɛ Bootstrap CSS no mu.
Wɔde LESS na esii
Dɛn nti na LESS?
Bootstrap yɛ LESS wɔ ne mu, ɛyɛ nnam stylesheet kasa a yɛn adamfo pa, Alexis Sellier ayɛ . Ɛma CSS a egyina nhyehyɛe so a wɔbɛyɛ no yɛ ntɛmntɛm, ɛyɛ mmerɛw, na ɛyɛ anigye.
Dɛn na ɛka ho?
Sɛ́ CSS ntrɛwmu no, LESS no de nsakrae ahorow, mixins a wɔde yɛ koodu no mu nsɛm nketenkete a wotumi san de di dwuma, dwumadi ahorow a wɔde yɛ akontaabu a ɛnyɛ den, nesting, ne kɔla dwumadi ahorow mpo ka ho.
Nneɛma a Ɛsakra
Kɔla ne piksel botae ahorow a wobɛhwɛ so wɔ CSS mu no betumi ayɛ yaw kakra, mpɛn pii no copy ne paste ahyɛ mu ma. Nanso ɛnyɛ LESS—fa kɔla anaa pixel values ma sɛ variables na sesa no pɛnkoro.
Nneɛma a wɔde frafra
Saa border-radius mpaemuka abiɛsa a ɛsɛ sɛ woyɛ wɔ daa ol' CSS mu? Seesei wɔakɔ fam akɔ line baako so denam mixins mmoa so, snippets of code a wobɛtumi asan de adi dwuma wɔ baabiara.
Oprehyɛn ahorow
Ma wo grid, anim, ne pii super flexible denam akontaabu a wobɛyɛ wɔ fly ne operations so. Bɔ, kyekyɛ, fa ka ho, na yi wo kwan a ɛkɔ CSS sanity no fi mu.
Bootstrap variables LESS nsakraeɛ, wɔn botaeɛ, ne dwumadie akwankyerɛ
Scaffolding ne nkitahodi ahorow
@bodyBackground |
@white |
Kratafa no akyi kɔla | |
@textColor |
@grayDark |
Default text color ma nipadua mũ no nyinaa, nsɛmti, ne nea ɛkeka ho | |
@linkColor |
#08c |
Default link nkyerɛwee kɔla | |
@linkColorHover |
darken(@linkColor, 15%) |
Default link nkyerɛwee hover kɔla |
Grid nhyehyɛe
@gridColumns |
12. 12 |
@gridColumnWidth |
60px na ɛyɛ |
@gridGutterWidth |
20px na ɛyɛ |
@fluidGridColumnWidth |
6.382978723% na ɛwɔ hɔ. |
@fluidGridGutterWidth |
2.127659574% na ɛwɔ hɔ. |
Typography a wɔde kyerɛw nsɛm
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, a ɛnyɛ hwee | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Adema Foforo", ahunmu biako | |
@baseFontSize |
13px na ɛwɔ hɔ | Ɛsɛ sɛ ɛyɛ piksel ahorow |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px na ɛyɛ | Ɛsɛ sɛ ɛyɛ piksel ahorow |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Nnwinnade ahorow
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Kɔla ahorow a ɛyɛ fitaa
@black |
#000 na ɛwɔ hɔ | |
@grayDarker |
#222 na ɛwɔ hɔ | |
@grayDark |
#333 na ɛwɔ hɔ | |
@gray |
#555 na ɛwɔ hɔ | |
@grayLight |
#999 na ɛwɔ hɔ | |
@grayLighter |
#eee | |
@white |
#fff |
Accent kɔla ahorow
@blue |
#049cdb na ɛwɔ hɔ | |
@green |
#46a546 na ɛwɔ hɔ | |
@red |
#9d261d na ɛwɔ hɔ | |
@yellow |
#ffc40d na ɛwɔ hɔ | |
@orange |
#f89406 na ɛwɔ hɔ | |
@pink |
#c3325f na ɛkyerɛ | |
@purple |
#7a43b6 na ɛwɔ hɔ |
Nneɛma a ɛwom
Nsɛmma nhoma no
@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 |
Nkyerɛwee ahorow
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Form states ne kɔkɔbɔ ahorow
@warningText |
#c09853 na ɛwɔ hɔ | |
@warningBackground |
#f3edd2 na ɛwɔ hɔ | |
@errorText |
#b94a48 na ɛwɔ hɔ | |
@errorBackground |
#f2dede | |
@successText |
#468847 na ɛwɔ hɔ | |
@successBackground |
#dff0d8 na ɛwɔ hɔ | |
@infoText |
#3a87ad na ɛkyerɛ | |
@infoBackground |
#d9edf7 na ɛwɔ hɔ |
Navbar na ɛwɔ hɔ
@navbarHeight |
40px na ɛyɛ | |
@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 |
Nneɛma a wɔde gu fam
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
Ɔkokodurufo unit
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Bootstrap a wɔde yɛ mixins
Ɛfa mixins ho
Mixins atitiriw
Mixin titiriw no yɛ nea wɔde ka ho anaasɛ ɛyɛ fã bi titiriw ma CSS no fã bi. Wɔakyerɛw no te sɛ CSS adesuakuw no ara pɛ na wobetumi afrɛ wɔn wɔ baabiara.
- . element { .
- . clearfix ();
- } .
Parametric mixins a wɔde yɛ nneɛma
Parametric mixin te sɛ mixin titiriw, nanso ɛsan nso gye parameters (enti na edin no) a ɛwɔ default values a wopɛ.
- . element { .
- . ɔhye - radius ( 4px );
- } .
Ɛnyɛ den sɛ wode w’ankasa de bɛka ho
Ɛkame ayɛ sɛ wɔde Bootstrap mixins nyinaa sie wɔ mixins.less mu, fael a ɛyɛ nwonwa a ɛyɛ mfaso .less a ɛma wutumi de mixin di dwuma wɔ .less fael a ɛwɔ adwinnade no mu biara mu.
Enti, kɔ w’anim na fa nea ɛwɔ hɔ dedaw no di dwuma anaasɛ ntwentwɛn wo nan ase sɛ wode w’ankasa de bɛka ho sɛnea wuhia.
Mixins ka ho
Nneɛma a wɔde di dwuma
| Mixin a wɔde yɛ nneɛma | Nneɛma a wɔde yɛ nneɛma | Sɛnea wɔde di dwuma |
|---|---|---|
.clearfix() |
ɛnyɛ ebiara | Fa ka ɔwofo biara ho na ama floats a ɛwɔ mu no afi hɔ |
.tab-focus() |
ɛnyɛ ebiara | Fa Webkit focus style ne Firefox outline kurukuruwa no di dwuma |
.center-block() |
ɛnyɛ ebiara | Auto center a block-level element a wɔde di dwumamargin: auto |
.ie7-inline-block() |
ɛnyɛ ebiara | Fa di dwuma de ka daa display: inline-blockho na woanya IE7 mmoa |
.size() |
@height @width |
Fa ɔsorokɔ ne ne tɛtrɛtɛ si nkyerɛwde biako so ntɛmntɛm |
.square() |
@size |
Builds on .size()to set ne tɛtrɛtɛ ne sorokɔ sɛ botae koro no ara |
.opacity() |
@opacity |
Fa, wɔ akontaahyɛde mũ no nyinaa mu, opacity ɔha biara mu nkyekyem (sɛ nhwɛso no, "50" anaa "75") . |
Nkyerɛwee ahorow
| Mixin a wɔde yɛ nneɛma | Nneɛma a wɔde yɛ nneɛma | Sɛnea wɔde di dwuma |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Fa placeholdernsɛm no kɔla si hɔ ma nsɛm a wode bɛhyɛ mu |
Typography a wɔde kyerɛw nsɛm
| Mixin a wɔde yɛ nneɛma | Nneɛma a wɔde yɛ nneɛma | Sɛnea wɔde di dwuma |
|---|---|---|
#font > #family > .serif() |
ɛnyɛ ebiara | Yɛ element bi a wɔde serif font stack di dwuma |
#font > #family > .sans-serif() |
ɛnyɛ ebiara | Yɛ element bi fa sans-serif font stack di dwuma |
#font > #family > .monospace() |
ɛnyɛ ebiara | Yɛ element bi de monospace font stack di dwuma |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Ɛnyɛ den sɛ wobɛhyehyɛ font kɛse, emu duru, ne nea edi kan |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Fa font abusua no si serif, na hwɛ kɛse, emu duru, ne anim |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Fa font abusua no si sans-serif so, na hwɛ kɛse, emu duru, ne anim |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Fa font abusua no si monospace so, na hwɛ kɛse, emu duru, ne anim |
Grid nhyehyɛe
| Mixin a wɔde yɛ nneɛma | Nneɛma a wɔde yɛ nneɛma | Sɛnea wɔde di dwuma |
|---|---|---|
.container-fixed() |
ɛnyɛ ebiara | Yɛ ade a ɛwɔ mfinimfini a ɛkɔ soro a wode bɛkura wo nsɛm no mu |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Yɛ pixel grid nhyehyɛe (container, row, ne columns) a n columns ne x pixel wide gutter |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Generate a ɔha biara mu grid nhyehyɛe a n columns ne x % wide gutter |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Generate pixel grid nhyehyɛe ma inputelements, akontaabu ma padding ne borders |
.makeColumn |
@columns: 1, @offset: 0 |
Dane biara divyɛ grid column a .span*adesua ahorow no nni mu |
CSS3 agyapade ahorow
| Mixin a wɔde yɛ nneɛma | Nneɛma a wɔde yɛ nneɛma | Sɛnea wɔde di dwuma |
|---|---|---|
.border-radius() |
@radius |
Fa element bi ntwea so yɛ kurukuruwa. Ebetumi ayɛ botae biako anaasɛ botae anan a wɔde ahunmu atew mu |
.box-shadow() |
@shadow |
Fa drop shadow bi ka element bi ho |
.transition() |
@transition |
Fa CSS3 nsakrae nkɛntɛnso ka ho (sɛ nhwɛso no, all .2s linear) . |
.rotate() |
@degrees |
Di akɔneaba element bi n digrii |
.scale() |
@ratio |
Scale element bi ma ɛnyɛ ne kɛse a edi kan no mmɔho n |
.translate() |
@x, @y |
Fa element bi kɔ x ne y planes no so |
.background-clip() |
@clip |
Twitwa element bi akyi (ɛho wɔ mfaso ma border-radius) . |
.background-size() |
@size |
Fa CSS3 so hwɛ mfonini ahorow a ɛwɔ akyi no kɛse so |
.box-sizing() |
@boxmodel |
Sesa adaka no nhwɛso ma element bi (sɛ nhwɛso no, border-boxma full-width input) . |
.user-select() |
@select |
Di cursor a wɔpaw nsɛm a ɛwɔ kratafa bi so no so |
.backface-visibility() |
@visibility: visible |
Siw nsɛm a ɛwɔ mu no a ɛrehyerɛn bere a wode CSS 3D nsakrae redi dwuma no ano |
.resizable() |
@direction: both |
Ma element biara ne kɛse nyɛ nea wotumi sesa wɔ nifa ne ase |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Ma element biara mu nsɛm no mfa CSS3 columns nni dwuma |
.hyphens() |
@mode: auto |
CSS3 hyphenation bere a wopɛ no (a ɛka ho word-wrap: break-word) . |
Nneɛma a ɛwɔ akyi ne nea ɛkɔ soro
| Mixin a wɔde yɛ nneɛma | Nneɛma a wɔde yɛ nneɛma | Sɛnea wɔde di dwuma |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Ma element bi akyi kɔla a ɛyɛ hann |
#translucent > .border() |
@color: @white, @alpha: 1 |
Ma element bi hye so kɔla a ɛyɛ hann |
#gradient > .vertical() |
@startColor, @endColor |
Yɛ cross-browser vertical akyi gradient |
#gradient > .horizontal() |
@startColor, @endColor |
Yɛ cross-browser a ɛwɔ akyi a ɛkɔ soro no |
#gradient > .directional() |
@startColor, @endColor, @deg |
Yɛ cross-browser akwankyerɛ akyi gradient |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Yɛ cross-browser a ɛwɔ kɔla abiɛsa akyi gradient |
#gradient > .radial() |
@innerColor, @outerColor |
Yɛ cross-browser radial akyi kwan a ɛkɔ soro |
#gradient > .striped() |
@color, @angle |
Yɛ cross-browser striped akyi nsensanee |
#gradientBar() |
@primaryColor, @secondaryColor |
Wɔde di dwuma ma buttons de ma gradient ne border a ɛyɛ sum kakra |
Bootstrap a wɔde LESS reboaboa ano
Nnwinnade a wɔde boaboa nneɛma ano
Node a ɛwɔ makefile no
Install LESS ahyɛdeɛ kwan compiler, JSHint, Recess, ne uglify-js wiase nyinaa ne npm denam ahyɛdeɛ a ɛdidi soɔ yi a wobɛtu so:
$ npm instɔl -g kakraa bi jshint recess uglify-js
Sɛ wo instɔl wie a, tu mmirika makefi wo bootstrap directory no ntini no mu kɛkɛ na wo nyinaa ayɛ nhyehyɛe.
Bio nso, sɛ wowɔ watchr a wɔde ahyɛ mu a, wobɛtumi atu mmirika make watchama bootstrap no asan ayɛ no ankasa bere biara a wobɛsesa fael bi wɔ bootstrap lib no mu (eyi nhia, ɛyɛ ɔkwan a ɛyɛ mmerɛw ara kwa).
Ahyɛde kwan so
Fa LESS ahyɛdeɛ kwan adwinnadeɛ no fa Node so na fa ahyɛdeɛ a ɛdidi soɔ yi di dwuma:
$ lessc ./less/bootstrap.less > bootstrap.css. Ɛyɛ asɛm a ɛyɛ anigye
Hwɛ hu sɛ wode bɛka --compresssaa ahyɛde no ho sɛ worebɔ mmɔden sɛ wobɛkora baiti ahorow bi so a!
Javascript a wɔde kyerɛw nsɛm
Twe Less.js a aba foforo no na fa ɔkwan a ɛkɔ so (ne Bootstrap) no ka ho wɔ <head>.
<link rel = "stylesheet/less" href = "/ɔkwan/kɔ/bootstrap.less" > <script src = "/kwan/kɔ/less.js" ></script>
Sɛ wopɛ sɛ wosan boaboa .less fael ahorow no ano a, sie kɛkɛ na san fa wo krataafa no hyɛ mu. Less.js boaboa wɔn ano na ɛde sie wɔ local storage mu.
Mac app a ɛnyɛ aban de
Mac app a ɛnyɛ aban de no hwɛ .less fael ahorow no kyerɛwtohɔ ahorow na ɛboaboa koodu no ano kɔ fael ahorow a ɛwɔ mpɔtam hɔ mu bere a wɔakora .less fael a wɔahwɛ so biara akyi.
Sɛ wopɛ a, wubetumi asesa nea wopɛ wɔ app no mu ama woayɛ ketewaa bi ne directory a fael ahorow a wɔaboaboa ano no bɛkɔ akowie mu.
Mac app ahorow pii
Crunch a ɛyɛ fɛ
Crunch yɛ LESS editor ne compiler a ɛyɛ fɛ a wɔasi wɔ Adobe Air so.
CodeKit a ɛwɔ hɔ
Wɔyɛɛ no guy koro no ara sɛ Mac app a ɛnyɛ aban de no, CodeKit yɛ Mac app a ɛboaboa LESS, SASS, Stylus, ne CoffeeScript ano.
Nea ɛnyɛ mmerɛw
Mac, Linux, ne PC app a wɔde twetwe fael ahorow a wɔboaboa ano na wɔde gu fam. Nea ɛka ho no, source code no wɔ GitHub so .