Okukozesa LESS ne Bootstrap

Customize era okugaziya Bootstrap ne LESS , CSS preprocessor, okweyambisa enkyukakyuka, mixins, n'ebirala ebikozesebwa okuzimba Bootstrap's CSS.

Lwaki LESS?

Bootstrap ekoleddwa ne LESS ku musingi gwayo, olulimi lwa stylesheet olukyukakyuka olwakolebwa mukwano gwaffe omulungi, Alexis Sellier . Kifuula okukola CSS eyesigamiziddwa ku nkola okwangu, okwangu, era okusanyusa.

Kiki ekirimu?

Nga ekyongereza kya CSS, LESS erimu enkyukakyuka, mixins ez’ebitundutundu bya koodi ebiddamu okukozesebwa, emirimu gy’okubala okwangu, okuteeka ebisu, n’emirimu gya langi.

Manya ebisingawo

CSS ENTONO

Kyalira omukutu omutongole ku http://lesscss.org/ okumanya ebisingawo.

Enkyukakyuka ezikyukakyuka

Okuddukanya langi n’emiwendo gya pixel mu CSS kiyinza okuluma akatono, ebiseera ebisinga nga kijjudde okukoppa n’okuteeka. Si ne LESS wadde —gaba langi oba emiwendo gya pixel nga enkyukakyuka era ozikyuse omulundi gumu.

Ebirungo ebitabuddwa

Ezo ssatu border-radius declarations olina okukola mu regular ol' CSS? Kati zikka ku layini emu nga ziyambibwako mixins, snippets za code z'osobola okuddamu okukozesa wonna.

Ebikwekweto

Fuula grid yo, okukulembera, n'okusinga super flexible nga okola math ku fly n'emirimu. Kubisaamu, gabana, gattako, era oggyeko ekkubo lyo erigenda ku CSS sanity.

Scaffolding n’ebiyungo

@bodyBackground @white Langi y’emabega w’olupapula
@textColor @grayDark Langi y'ebiwandiiko eya bulijjo ey'omubiri gwonna, emitwe, n'ebirala
@linkColor #08c Langi y'ebiwandiiko by'enkolagana eya bulijjo
@linkColorHover darken(@linkColor, 15%) Default link ekiwandiiko hover langi

Enkola ya grid

@gridColumns 12. 12
@gridColumnWidth 60px nga bwe kiri
@gridGutterWidth 20px nga bwe kiri
@fluidGridColumnWidth 6.382978723% nga bwe kiri.
@fluidGridGutterWidth 2.127659574% nga bwe kiri.

Okuwandiika ebitabo

@sansFontFamily "Helvetica Neue", Helvetica, Arial, nga tewali kituufu
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Omubaka Omupya", ekifo kimu
@baseFontSize 13px nga bwe kiri Alina okuba nga pixels
@baseFontFamily @sansFontFamily
@baseLineHeight 18px nga bwe kiri Alina okuba nga pixels
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Emmeeza

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

Langi za langi enzirugavu

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

Langi za ‘accent’

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

Ebitundu ebikola omubiri

Ebikondo ebiyitibwa Buttons

@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

Ffoomu

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

Foomu embeera n’okulabula

@warningText #c09853 nga bwe kiri
@warningBackground #f3edd2
@errorText #b94a48 nga bwe kiri
@errorBackground #f2dede
@successText #468847 nga bwe kiri
@successBackground #dff0d8 nga bwe kiri
@infoText #3a87okulangirira
@infoBackground #d9edf7

Navbar

@navbarHeight 40px nga bwe kiri
@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

Ebintu ebigwa wansi

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

Ekitundu ky’omuzira

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Ebikwata ku mixins

Ebikozesebwa ebisookerwako (basic mixins).

Mixin enkulu mu bukulu ye include oba partial ku snippet ya CSS. Ziwandiikibwa nga kiraasi ya CSS era zisobola okuyitibwa wonna.

  1. . elementi { .
  2. . okutereeza obulungi ();
  3. } .

Ebikozesebwa mu kutabula (parametric mixins).

Parametric mixin eringa basic mixin, naye era ekkiriza parameters (wano we wava erinnya) n'emiwendo egy'enjawulo egy'okwesalirawo.

  1. . elementi { .
  2. . ensalosalo - radius ( 4px );
  3. } .

Kyangu okugattako ebibyo

Kumpi mixins zonna eza Bootstrap ziterekebwa mu mixins.less, fayiro ey’ekitalo ey’omugaso .less ekusobozesa okukozesa mixin mu fayiro yonna eya .less mu kitabo ky’ebikozesebwa.

Kale, genda mu maaso okozese ebiriwo oba wulira nga oli waddembe okugattako ebibyo nga bwe weetaaga.

Mulimu ebirungo ebiyitibwa mixins

Ebikozesebwa

Mixin Ebipimo (parameters). Enkozesa
.clearfix() tewali Okwongerako ku muzadde yenna okulongoosa floats munda
.tab-focus() tewali Kozesa omusono gw'okussa essira ku Webkit n'ensengeka ya Firefox eyeetooloovu
.center-block() tewali Auto center ekintu eky’omutendera gwa bulooka nga okozesamargin: auto
.ie7-inline-block() tewali Kozesa nga kwotadde ne bulijjo display: inline-blockokufuna obuwagizi bwa IE7
.size() @height @width Teeka mangu obuwanvu n’obugazi ku layini emu
.square() @size Azimba ku .size()okuteeka obugazi n'obugulumivu nga omuwendo gwe gumu
.opacity() @opacity Teeka, mu namba enzijuvu, ebitundu ku kikumi eby'obutatangaavu (okugeza, "50" oba "75")

Ffoomu

Mixin Ebipimo (parameters). Enkozesa
.placeholder() @color: @placeholderText Teeka placeholderlangi y'ekiwandiiko ku biyingizibwa

Okuwandiika ebitabo

Mixin Ebipimo (parameters). Enkozesa
#font > #family > .serif() tewali Kola elementi okukozesa serif font stack
#font > #family > .sans-serif() tewali Kola elementi okukozesa sans-serif font stack
#font > #family > .monospace() tewali Kola elementi okukozesa monospace font stack
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Kyangu okuteeka sayizi y'empandiika, obuzito, n'okukulembera
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Teeka ekika ky'empandiika ku serif, era ofuge obunene, obuzito, n'okukulembera
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Teeka ekika ky'empandiika ku sans-serif, era ofuge obunene, obuzito, n'okukulembera
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Teeka ekika ky'empandiika ku kifo kimu, era ofuge obunene, obuzito, n'okukulembera

Enkola ya grid

Mixin Ebipimo (parameters). Enkozesa
.container-fixed() tewali Tonda ekintu ekiri wakati mu bbanga eky’okukwata ebirimu byo
#grid > .core() @gridColumnWidth, @gridGutterWidth Okukola enkola ya pixel grid (container, row, ne columns) nga erina empagi n ne x pixel wide gutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Okukola enkola ya grid ku buli kikumi nga erina empagi n ne x % wide gutter
#grid > .input() @gridColumnWidth, @gridGutterWidth Okukola enkola ya pixel grid ku inputelementi, okubala ku padding ne borders
.makeColumn @columns: 1, @offset: 0 Fuula yonna divmu grid column nga tewali .span*classes

Ebintu bya CSS3

Mixin Ebipimo (parameters). Enkozesa
.border-radius() @radius Weetooloole enkoona za elementi. Kiyinza okuba omuwendo gumu oba emiwendo ena egyawuddwamu ebbanga
.box-shadow() @shadow Okwongerako ekisiikirize ekitonnya ku elementi
.transition() @transition Okwongerako CSS3 enkyukakyuka effect (okugeza, all .2s linear) .
.rotate() @degrees Zingulula elementi n diguli
.scale() @ratio Sikaani elementi okutuuka ku n emirundi n obunene bwayo obw’olubereberye
.translate() @x, @y Tambuza elementi ku nnyonyi za x ne y
.background-clip() @clip Salako emabega w'ekintu (eky'omugaso eri border-radius) .
.background-size() @size Fuga obunene bw'ebifaananyi eby'emabega ng'oyita mu CSS3
.box-sizing() @boxmodel Kyusa ekifaananyi ky'ekibokisi ku elementi (okugeza, border-boxku full-width input) .
.user-select() @select Fuga cursor okulonda ebiwandiiko ku lupapula
.backface-visibility() @visibility: visible Okuziyiza okuwuuma kw’ebirimu ng’okozesa enkyukakyuka za CSS 3D
.resizable() @direction: both Fuula elementi yonna ekyusibwa obunene ku ddyo ne wansi
.content-columns() @columnCount, @columnGap: @gridGutterWidth Fuula ebirimu mu elementi yonna okukozesa ennyiriri za CSS3
.hyphens() @mode: auto CSS3 hyphenation nga oyagala (mulimu word-wrap: break-word) .

Ebifaananyi eby’emabega n’ebigenda mu maaso

Mixin Ebipimo (parameters). Enkozesa
#translucent > .background() @color: @white, @alpha: 1 Wa elementi langi y’emabega etangalijja
#translucent > .border() @color: @white, @alpha: 1 Wa elementi langi y’ensalosalo etangalijja
#gradient > .vertical() @startColor, @endColor Tonda ekifaananyi ky’emabega ekyesimbye eky’omusalaba-browser
#gradient > .horizontal() @startColor, @endColor Tonda ekifaananyi eky'omusalaba-browser horizontal background gradient
#gradient > .directional() @startColor, @endColor, @deg Tonda ekifaananyi eky’okusalako-browser eky’obulagirizi eky’emabega
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Tonda cross-browser eya langi ssatu gradient y'emabega
#gradient > .radial() @innerColor, @outerColor Tonda ekifaananyi kya cross-browser radial background gradient
#gradient > .striped() @color, @angle Tonda ekifaananyi eky’emabega eky’emisono egy’omusalaba-browser
#gradientBar() @primaryColor, @secondaryColor Ekozesebwa ku buttons okugaba gradient ne border enzirugavu katono
Note: Bw'oba oweereza okusaba okusika ku GitHub ne CSS ekyusiddwa, olina okuddamu okukung'aanya CSS ng'oyita mu nkola yonna ku zino.

Ebikozesebwa mu kukungaanya

Node nga eriko makefile

Teeka omukung'aanya w'ennyiriri z'ekiragiro LESS, JSHint, Recess, ne uglify-js mu nsi yonna ne npm ng'okola ekiragiro kino wammanga:

$ npm okuteeka -g ekitono jshint okuwummulamu uglify-js

Bw'omala okussaako dduka budduka makeokuva ku kikolo kya bootstrap directory yo era mwenna muba otegese.

Okugatta ku ekyo, bw’oba ​​olina watchr gy’ossaako, oyinza okudduka make watchokubeera ne bootstrap okuddamu okuzimbibwa mu ngeri ey’otoma buli lw’olongoosa fayiro mu bootstrap lib (kino tekikyetaagisa, nkola ya kukwanguyiza yokka).

Ennyiriri z’ekiragiro

Teeka ekintu kya LESS command line tool ng'oyita mu Node era okole ekiragiro kino wammanga:

$ lessc ./less/okutandika.less > okutandika.css

Kakasa nti ossaamu --compressmu kiragiro ekyo bw'oba ogezaako okutereka bytes ezimu!

Javascript

Wano wefunire Less.js eyasembyeyo era oteekemu ekkubo erigenda mu yo (ne Bootstrap) mu <head>.

<link rel = "olupapula lw'omulembe/ekitono" href = "/ekkubo/okugenda/bootstrap.less" > <script src = "/ekkubo/okugenda/okutono.js" ></script>  
 

Okuddamu okukung’aanya fayiro za .less, omala kuzitereka n’oddamu okutikka omuko gwo. Less.js ezikuŋŋaanya n’ezitereka mu kutereka okw’omu kitundu.

App etali ntongole eya Mac

App ya Mac etali ntongole etunuulira dayirekita za fayiro za .less era ekuŋŋaanya koodi mu fayiro z’omu kitundu oluvannyuma lwa buli kutereka fayiro ya .less etunuuliddwa.

Bw’oba ​​oyagala, osobola okukyusakyusa by’oyagala mu app okusobola okukendeeza mu ngeri ey’otoma ne dayirekita ki fayiro ezikung’aanyiziddwa gye zikoma mu.

Apps endala eza Mac

Crunch nga bwe kiri

Crunch ye editor ne compiler ya LESS erabika obulungi ennyo eyazimbibwa ku Adobe Air.

CodeKit

Yatondebwawo ggaayi y’omu ne Mac app etali ntongole, CodeKit ye ​​Mac app ekuŋŋaanya LESS, SASS, Stylus, ne CoffeeScript.

Simpless

Mac, Linux, ne PC app ey'okusika n'okusuula okukung'aanya fayiro za LESS. Plus, source code eri ku GitHub .