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.

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.

Sua pii

AKWANKYERƐ CSS

Kɔ aban wɛbsaet hɔ wɔ http://lesscss.org/ na sua pii.

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.

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

Ɛ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.

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

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ɛ.

  1. . element { .
  2. . ɔhye - radius ( 4px );
  3. } .

Ɛ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
Hyɛ no nsow: Sɛ wode twetwe adesrɛ rekɔma GitHub a CSS a wɔasesa wom a, ɛsɛ sɛ wosan boaboa CSS no ano denam akwan yi mu biara so.

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 .